码迷,mamicode.com
首页 > Web开发 > 详细

jQuery超酷响应式瀑布流效果

时间:2018-05-15 14:32:15      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:blocks   lse   function   javascrip   ble   ready   syn   pad   pac   

参考  http://www.sucaihuo.com/js/74.html

 

<script src="scripts/blocksit.min.js"></script>

1
2
3
4
5
6
7
8
<div  id="container">
    <div  class="grid">
        <!-- content -->
    </div>
    <div  class="grid">
    <!-- content -->
    </div>
</div>

  

$(document).ready(function() {
    //blocksit define
    $(window).load( function() {
        $(‘#container‘).BlocksIt({
            numOfCol: 5, //一排放的个数
            offsetX: 0, //横向距离
            offsetY: 0, //纵向距离
            blockElement: ‘.grid‘ //瀑布流的盒子
        });
    });
    
    //window resize
    var currentWidth = 1100;
    $(window).resize(function() {
        var winWidth = $(window).width();
        var conWidth;
        if(winWidth < 660) {
            conWidth = 300;
            col = 1
        } else if(winWidth < 880) {
            conWidth = 660;
            col = 2
        } else if(winWidth < 1100) {
            conWidth = 880;
            col = 3;
        } else {
            conWidth = 1100;
            col = 5;
        }
        
        if(conWidth != currentWidth) {
            currentWidth = conWidth;
            $(‘#container‘).width(conWidth);
            $(‘#container‘).BlocksIt({
                numOfCol: col,
                offsetX: 0,
                offsetY: 0
            });
        }
    });
});

  

jQuery超酷响应式瀑布流效果

标签:blocks   lse   function   javascrip   ble   ready   syn   pad   pac   

原文地址:https://www.cnblogs.com/dare/p/9040717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!