参考 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