BlocksIt是一款简单漂亮的瀑布流插件,兼容性很好。今天我们结合lazyload懒加载来做一个超帅的瀑布流效果。
首先我们在#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>
......
接着同样我们在#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>
引入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() {
$('#container').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8
});
}
});
滚动时加载
$(window).scroll(function() {
// 当滚动到最底部以上50像素时, 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height() < 50) {
$('#container').append($("#test").html());
$('#container').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;
$('#container').width(conWidth);
$('#container').BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8
});
}
});
相关插件:<a href='http://www.sucaihuo.com/js/46.html' target='_blank'>Lazyload图片懒加载</a> 、<a href='http://www.sucaihuo.com/js/47.html' target='_blank'>jQuery插件masonry实现瀑布流布局</a>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791