首页 > 代码库 > 瀑布流 - 原声JAVACRIPT + Jquery 实现

瀑布流 - 原声JAVACRIPT + Jquery 实现

<!Doctype>
<html>
 <head>
   <title>瀑布流布局</title>
   <meta charset="utf-8" />
 </head>
 <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.3.min.js"></script>
 <style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .pin{
        padding: 15px 0 0 15px;
        float:left;
    }
    .box{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        width:162px;
        height:auto;
    }
 </style>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/1.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/11.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/12.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/13.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/14.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/15.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/16.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/17.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/18.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/19.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mamicode.com/images/21.jpg"/>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

  $(window).on(‘load‘, function(){
    onl oad();
    $(window).on(‘scroll‘, function(){
      var data = http://www.mamicode.com/{‘data‘:[{‘src‘:‘images/1.jpg‘},{‘src‘:‘images/2.jpg‘},{‘src‘:‘images/3.jpg‘},{‘src‘:‘images/4.jpg‘}]};
      if(isOnLoad()){
        $.each(data.data, function(index, item){
          // var html = html + ‘<div class="pin"><div class="box"><img src="http://www.mamicode.com/‘+$(item).attr(‘src‘)+‘" /></div></div>‘;
          // $(‘#main‘).html(html);
          var $oPin = $(‘<div>‘).addClass(‘pin‘).appendTo($("#main"));
          var $oBox = $(‘<div>‘).addClass(‘box‘).appendTo($oPin);
          $(‘<img>‘).attr(‘src‘, $(item).attr(‘src‘)).appendTo($oBox);
        });
        onl oad();
      }
    })
  })

  function onl oad(){
    var parentNode = $(‘#main‘),
        nodeChilds = $(‘#main div.pin‘);
    var clientWidth = $(window).width();
    var nodeWidth = nodeChilds.eq(0).outerWidth();
    var num = Math.floor(clientWidth / nodeWidth);
    parentNode.css({
      ‘width‘: num*nodeWidth + ‘px‘,
      ‘margin‘: ‘0 auto‘
    });

    var childsArr = [];
    nodeChilds.each(function(index, item){
      var nodeHeight = nodeChilds.eq(index).outerHeight();
      if(index < num){
        childsArr[index] = nodeHeight;
      }else{
        var minH = Math.min.apply(null, childsArr);
        var minHIndex = $.inArray(minH, childsArr);
        $(item).css({
          ‘position‘: ‘absolute‘,
          ‘top‘: minH,
          ‘left‘: nodeChilds.eq(minHIndex).position().left
        });
        childsArr[minHIndex] += nodeChilds.eq(index).outerHeight();
      }
    });
  }

  function isOnLoad(){
    var clientHeight = $(window).height();
    var nodeChilds = $(‘#main div.pin‘);
    var nodeChildTop = nodeChilds.last().get(0).offsetTop + Math.floor(nodeChilds.last().outerHeight() / 2);
    var scrollTop = $(window).scrollTop();
    return (nodeChildTop < clientHeight + scrollTop) ? true : false;
  }
// window.onload = function(){
//   onl oadImg(‘main‘, ‘pin‘);

//   window.onscroll = function(){
//     var data = http://www.mamicode.com/{‘data‘:[{‘src‘:‘images/1.jpg‘},{‘src‘:‘images/2.jpg‘},{‘src‘:‘images/3.jpg‘},{‘src‘:‘images/4.jpg‘}]};
//     var mainId = document.getElementById(‘main‘);
//     if(isLoadImg()){
//       for(var i = 0, len = data.data.length; i < len; i++){
//         var divHtml = ‘<div class="pin"><div class="box"><img src="http://www.mamicode.com/‘+data.data[i].src+‘" /></div></div>‘;
//         // var oPinDiv = document.createElement(‘div‘);
//         // oPinDiv.className = ‘pin‘;
//         // mainId.appendChild(oPinDiv);
//         // var oPinBoxDiv = document.createElement(‘div‘);
//         // oPinBoxDiv.className = ‘box‘;
//         // oPinDiv.appendChild(oPinBoxDiv);
//         // var oImg = document.createElement(‘img‘);
//         // oImg.src = http://www.mamicode.com/‘images/‘ + data.data[i].src;
//         // oPinBoxDiv.appendChild(oImg);
//         mainId.innerHTML += divHtml;
//       }
//       onl oadImg(‘main‘, ‘pin‘);
//     }
//   }
// }

// function onl oadImg(parent, classBox){
//   var documentWidth = document.documentElement.clientWidth || document.body.clientWidth;
//   var oparent = document.getElementById(parent);
//   var oPin = getClassName(oparent, classBox);
//   var oPinWidth = oPin[0].offsetWidth;
//   var num = Math.floor(documentWidth / oPinWidth);
//   oparent.style.cssText = oPinWidth*num + ‘px; margin:0 auto;‘;

//   var oPinArr = [];
//   for(var i = 0, len = oPin.length; i < len; i++){
//     var oPinHeight = oPin[i].offsetHeight;
//     if(i < num){
//       oPinArr[i] = oPinHeight;
//     }else{
//       var minHeight = Math.min.apply(null, oPinArr);
//       var minIndex = getMinHeightIndex(oPinArr, minHeight);
//       oPin[i].style.position = ‘absolute‘;
//       oPin[i].style.top = minHeight + ‘px‘;
//       oPin[i].style.left = oPin[minIndex].offsetLeft + ‘px‘;
//       oPinArr[minIndex] += oPin[i].offsetHeight;
//     }
//   }

// }

// function getClassName(parent, className){
//   var classNames = [];
//   var nodes = parent.getElementsByTagName(‘*‘);
//   for(var i = 0, len = nodes.length; i < len; i++){
//     if(nodes[i].className == className ){
//       classNames.push(nodes[i]);
//     }
//   }
//   return classNames;
// }

// function getMinHeightIndex(arr, minH){
//   for(var i in arr){
//     if(arr[i] == minH){
//       return i;
//     }
//   }
// }

// function isLoadImg(){
//   var mainId = document.getElementById(‘main‘);
//   var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//   var oPin = getClassName(mainId,‘pin‘);
//   var oLast = oPin[oPin.length - 1];
//   var oLastHeight = oLast.offsetTop + Math.floor(oLast.offsetHeight / 2);
//   var scroTop = document.documentElement.scrollTop || document.body.scrollTop;
//   return (oLastHeight < scroTop + clientHeight) ? true : false;
// }

</script>
</html>


瀑布流 - 原声JAVACRIPT + Jquery 实现