基于jQuery自适应宽度无限加载的瀑布流布局

    基于jQuery的一款自适应浏览器款的的瀑布流布局插件，能够根据浏览器宽度，决定显示的列数。支持鼠标滚动到底部自动加载，无限加载（前提是首次载入的图片足够多，右边会有滚动条，能够触发滚动条滚动事件）。使用非常简单，兼容性好，经测试，IE以上浏览器及其他现代浏览器都能够很好的显示。因为比较简单，就不提供下载了，根据下面的教程，就能很简单的实现了。 1、在您的css中加入下面的代码：

.box{position:relative; float:left;}
.content{padding:10px;/* border:1px solid #fff; border-radius:5px; box-shadow:0 0 5px #ccc;*/}
.content img{width:246px; height:auto;border-radius:5px;}

2、在html中加入下面的结构的代码：

<div id="container">
      <div class="box">
          <div class="content">
              <img src="1.jpg">
          </div>
      </div>
      ... ...
</div>

上面的container是外层容器，box是瀑布流的每个内容子容器，您可以根据需求自己定制box里面的内容，如标题、描述、链接等，但是切记不要给box加样式，免得影响瀑布流的效果。

3、引入jQuery

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

4、在html文件末尾加入下面的js代码：

<script type="text/javascript">
    $(document).ready(function(){
        $(window).on('load',function(){
          imgLocation();
          var dataImg = {'data':[
            {'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},
          ]};
          window.onscroll = function(){
              if(scrollside()){
                $.each(dataImg.data,function(index,value){
                   var box = $('<div>').addClass('box').appendTo($('#container'));
                   var content = $('<div>').addClass('content').appendTo(box);
                   $('<img>').attr('src',$(value).attr('src')).appendTo(content);
                });
                imgLocation();
              };
          };
          
        });
    });

    function scrollside(){
         var box = $('.box');
       var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height()/2);
       var documentHeight = $(document).width();
       var scrollHeight = $(window).scrollTop();
       return (lastboxHeight < scrollHeight + documentHeight) ? true : false;
    };

    function imgLocation(){
        var box = $('.box');
        var boxWidth = box.eq(0).width();
        var num = Math.floor($(window).width()/boxWidth);   //将小数转换成整数
        var boxArr = [];
        box.each(function(index,value){

          var boxHeight = box.eq(index).height();
          if(index<num){
              boxArr[index] = boxHeight;
          }else{
              var minboxHeight = Math.min.apply(null,boxArr);
              var minboxIndex = $.inArray(minboxHeight,boxArr);
              $(value).css({
                  'position':'absolute',
                  'top':minboxHeight,
                  'left':box.eq(minboxIndex).position().left
              });
              boxArr[minboxIndex] += box.eq(index).height();
          };
        });

      $('img').hover(function(){
            $(this).css({
                'opacity':'0.8',
                'cursor': 'pointer'
            });
        },function(){
            $(this).css('opacity','1');
        });

    };
</script>