超酷响应式瀑布流效果（jQuery）-php手册-php.cn

超酷响应式瀑布流效果（jQuery）

PHP中文网

Release： 2016-06-07 11:38:52

Original

1599 people have browsed it

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

<br>

页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。

1、
首先我们在#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>  
......
2、
接着同样我们在#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>
3、
引入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() { 
        $(&#39;#container&#39;).BlocksIt({ 
            numOfCol: 5, 
            offsetX: 8, 
            offsetY: 8 
        }); 
    } 
});
4、
滚动时加载
$(window).scroll(function() { 
    // 当滚动到最底部以上50像素时， 加载新内容 
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 50) { 
        $(&#39;#container&#39;).append($("#test").html()); 
        $(&#39;#container&#39;).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; 
        $(&#39;#container&#39;).width(conWidth); 
        $(&#39;#container&#39;).BlocksIt({ 
            numOfCol: col, 
            offsetX: 8, 
            offsetY: 8 
        }); 
    } 
});

Copy after login