最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jQuery超酷响应式瀑布流效果

来源:http://www.erdangjiade.com/ 二当家的 2015-04-24 23:30浏览(1498)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jQuery超酷响应式瀑布流效果
分类:其它特效 > 瀑布流 难易:初级
查看演示 下载资源: 110

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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实现瀑布流布局

标签: 瀑布流响应式
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/74.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2