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>