jQuery超酷響應式瀑布流效果
阿新 • • 發佈：2018-05-15
function else if syntax RR wid lock etx fse get
參考 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超酷響應式瀑布流效果