jQuery超酷响应式瀑布流效果

来源:https://www.sucaihuo.com/js/74.html 2015-04-24 23:30浏览(4732) 收藏

BlocksIt是一款简单漂亮的瀑布流插件,兼容性很好。今天我们结合lazyload懒加载来做一个超帅的瀑布流效果。
jQuery超酷响应式瀑布流效果
分类:其它特效 > 瀑布流 难易:初级
查看演示 下载资源 下载积分: 20 积分

首先我们在#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.sucaihuo.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.sucaihuo.com/js</p> 
   <div class="meta"> 
    <a href="http://www.sucaihuo.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.sucaihuo.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
        });
    }
});

相关插件:<a href='http://www.sucaihuo.com/js/46.html' target='_blank'>Lazyload图片懒加载</a> 、<a href='http://www.sucaihuo.com/js/47.html' target='_blank'>jQuery插件masonry实现瀑布流布局</a>

标签: 瀑布流响应式
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2