页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。
1、
首先我们在#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>
......
2、
接着同样我们在#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>
3、
引入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
});
}
});
4、
滚动时加载
$(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
});
}
}); 