首页 > 特效插件 > 其他特效 >  基于jQuery自适应宽度无限加载的瀑布流布局正文

基于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>