jQuery超酷响应式瀑布流效果

收藏

BlocksIt是一款简单漂亮的瀑布流插件，兼容性很好。今天我们结合lazyload懒加载来做一个超帅的瀑布流效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

首先我们在#container放置多个.grid

<div class="grid"> 
   <div class="img_area"> 
    <img class="lazy" src="images/pixel.gif" data-original="images/1.jpg" width="175" /> 
   </div> 
   <strong>美女1</strong> 
   <p>jQuery超酷响应式瀑布流效果</p> 
   <div class="meta"> 
    <a href="http://www.erdangjiade.com/js/74.html" target="_blank">点击查看>>></a> 
   </div> 
  </div> 
  <div class="grid"> 
   <div class="img_area"> 
    <img class="lazy" src="images/pixel.gif" data-original="images/2.jpg" width="175" /> 
   </div> 
   <strong>美女2</strong> 
   <p>jQuery超酷响应式瀑布流效果，更多插件请访问素材火 http://www.erdangjiade.com/js</p> 
   <div class="meta"> 
    <a href="http://www.erdangjiade.com/js/74.html" target="_blank">点击查看>>></a> 
   </div> 
</div> 
......

接着同样我们在#test放置多个.grid，用于滚动加载复制。

<div id="test" style="display: none;"> 
   <div class="grid"> 
    <div class="img_area"> 
     <img class="lazy" src="images/pixel.gif" data-original="images/1.jpg" width="175" /> 
    </div> 
    <strong>美女1</strong> 
    <p>jQuery超酷响应式瀑布流效果 点击查看》》》</p> 
    <div class="meta"> 
     <a href="http://www.erdangjiade.com/js/74.html" target="_blank">点击查看>>></a> 
    </div> 
   </div> 
   ......
</div>

引入jQuery库、懒加载插件lazyload及瀑布流插件blocksit.min.js

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script> 
<script type="text/javascript" src="js/blocksit.min.js"></script>

懒加载

$("img.lazy").lazyload({
    load: function() {
        $('#container').BlocksIt({
            numOfCol: 5,
            offsetX: 8,
            offsetY: 8
        });
    }
});

滚动时加载

$(window).scroll(function() {
    // 当滚动到最底部以上50像素时， 加载新内容
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 50) {
        $('#container').append($("#test").html());
        $('#container').BlocksIt({
            numOfCol: 5,
            offsetX: 8,
            offsetY: 8
        });
        $("img.lazy").lazyload();
    }
});

//window resize
var currentWidth = 1100;
$(window).resize(function() {
    var winWidth = $(window).width();
    var conWidth;
    if (winWidth < 660) {
        conWidth = 440;
        col = 2
    } else if (winWidth < 880) {
        conWidth = 660;
        col = 3
    } else if (winWidth < 1100) {
        conWidth = 880;
        col = 4;
    } else {
        conWidth = 1100;
        col = 5;
    }

    if (conWidth != currentWidth) {
        currentWidth = conWidth;
        $('#container').width(conWidth);
        $('#container').BlocksIt({
            numOfCol: col,
            offsetX: 8,
            offsetY: 8
        });
    }
});

相关插件：Lazyload图片懒加载 、jQuery插件masonry实现瀑布流布局