首页 > Web开发 > 详细

jQuery超酷响应式瀑布流效果

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

参考  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超酷响应式瀑布流效果

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!