HTML代码：
<div class="content">
<div class="subnav">
<a class="text-center <if condition='$bcid eq $catid'>on</if>" href="{$Categorys[$bcid]['url']}">所有案例</a>
<YP:subcat catid="$bcid">
<a class="text-center <if condition='$r["id"] eq $catid'>on</if>" href="{$r.url}">{$r.catname}</a>
</YP:subcat>
</div>
<!-- 瀑布流样式开始 -->
<div class="waterfull clearfloat" id="waterfull">
<ul>
<volist name="list" id="k">
<li class="item">
<a href="{$k.url}" class="a-img">
<img src="{$k.thumb}" alt="{$k.title}">
</a>
<p class="case-list-title"><a href="{$k.url}">{$k.subtitle}：<strong>{$k.title}</strong></a></p>
<div class="samll-gn">
<a class="scanned">浏览：{$k.hits}</a>
<a href="/#taocan" class="goumai">我要购买</a>
<a class="c-share"><span>F</span>分享</a>
</div>
<p class="case-list-intro">{:cutstr($k['description'],45,'...',0,'')}</p>
</li>
</volist>
</ul>
</div>
<!-- 瀑布流样式结束 -->
<div class="hg30"></div>
<!-- 加载动画 -->
<div id="imloading" page="2" catid="{$catid}" cutstr="45" url="{:U('Ajax/catGet')}">玩命加载中...</div>
</div>jquery代码：
<script type="text/javascript">
$(function(){
/*瀑布流开始*/
var container = $('.waterfull ul'),
loading = $('#imloading');
// 初始化loading状态
loading.data("on",true);
function tores(){
var tmpWid = $(window).width();
if(tmpWid > 1170){
tmpWid = 1170;
}else{
var column=Math.floor(tmpWid/320);
tmpWid = column*320;
}
$('.waterfull').width(tmpWid);
}
tores();
$(window).resize(function(){
tores();
});
container.imagesLoaded(function(){
container.masonry({
columnWidth: 15,
itemSelector : '.item',
isFitWidth: false,
isAnimated: true,
isRTL:false,
isResizable: true,
animationOptions: {
duration: 700,
easing: 'easeInOutBack',
queue: false
}
});
});
//滚动数据
$(window).scroll(function(){
if(!loading.data("on")) return;
var itemNum = $('#waterfull').find('.item').length,
page = loading.attr('page'), //页码
showUrl = loading.attr('url'), //地址
catid = loading.attr('catid'), //栏目ID
cutstr = loading.attr('cutstr');
var itemArr=[];
itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
var maxTop = Math.max.apply(null,itemArr);
if(maxTop < $(window).height() + $(document).scrollTop()){
if(page <= 0){
//页码为0 就直接返回不加载
return false;
}else{
//设置加载变量(设置一个数据 on)
loading.data("on",false).fadeIn(500);
//请求数据
$.ajax({
url: showUrl,
type: 'GET',
dataType: 'json',
data: {catid:catid,page:page,cutstr:cutstr},
}).done(function (data) {
//设置页码
loading.attr('page',data.info);
if (data.status == 1) {
var _html = '';
//遍历数组
$.each(data.data, function(i, k) {
_html += "<li class=\"item\">";
_html += "<a href="+ k.url +" class=\"a-img\">";
_html += "<img src="+ k.thumb +" alt="+ k.title +">";
_html += "</a>";
_html += "<p class=\"case-list-title\"><a href="+ k.url +">"+ k.subtitle +"：<strong>"+ k.title +"</strong></a></p>";
_html += "<div class=\"samll-gn\">";
_html += "<a class=\"scanned\">浏览："+ k.hits +"</a>";
_html += "<a href=\"/#taocan\" class=\"goumai\">我要购买</a>";
_html += "<a class=\"c-share\"><span>F</span>分享</a>";
_html += "</div>";
_html += "<p class=\"case-list-intro\">"+ k.description +"</p>";
_html += "</li>";
});
//定时显示
var time=setTimeout(function(){
$(_html).find('img').each(function(index){
loadImage($(this).attr('src'));
})
var $newElems = $(_html).css({ opacity: 0}).appendTo(container);
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1},500);
container.masonry( 'appended', $newElems,true);
loading.data("on",true).fadeOut();
clearTimeout(time);
});
},500)
} else {
loading.attr('page',0);
loading.text('内容已加载完...').fadeOut(500);
}
});
}
}
});
//图片预加载...
function loadImage(url) {
var img = new Image();
//创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) {
return img.src;
}
img.onload = function () {
return img.src;
};
};
loadImage('/Public/i3me/images/case-3.jpg');
})
</script>这是jquery 插件：官网地址：http://masonry.desandro.com/
<script type="text/javascript" src="__PUBLIC__/js/jquery.masonrypubu.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jqeasing-pubu.js"></script>
