Maison > php教程 > php手册 > 超酷响应式瀑布流效果(jQuery)

超酷响应式瀑布流效果(jQuery)

PHP中文网
Libérer: 2016-06-07 11:38:52
original
1596 Les gens l'ont consulté

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

553d0ba4abc57.jpg<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 
        }); 
    } 
});
Copier après la connexion
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal