BlocksIt是一款简单漂亮的瀑布流插件,兼容性很好。今天我们结合lazyload懒加载来做一个超帅的瀑布流效果。


页面底部有演示、免费下载链接。若是想看更多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
});
}
});

评论() 相关

收藏

赞

hjl416148489

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。