html
<!--瀑布流布局2*-->
<script src=js/jquery.masonry.js></script>
<script src=js/jquery.infinitescroll.min.js></script>
<div frag=面板22>
<div class=listshow frag=窗口23 portletmode=simpleList>
<div frag=窗口内容>
<ul class=listcon clearfix>
<!--[InfoCycleBegin]-->
<li class=news_list>
<div class=news_box href={文章URL}>
<h3>
{标题}
</h3>
<p>
{缩略图}
</p>
<p>
{简介}
</p>
</div>
</li><!--[InfoCycleEnd]-->
</ul>
</div>
</div>
</div>
css
/*列表页*/
.listcon{margin:10px -10px;}
.listcon .news_list{display:inline-block;list-style:none;float:left; width:33.3%;}
.listcon .news_list .news_box{display:inline-block;margin:5px 10px 10px; border:1px solid #e5e5e5;}
.listcon .news_list .news_box:hover{box-shadow:0 0 4px #ccc;}
.listcon .news_list .news_box h3{line-height: 28px;padding:10px 15px 5px; font-size: 18px; font-weight:normal;font-family:Microsoft Yahei;color:#128ec2;}
.listcon .news_list .news_box h3 a{line-height: 28px;font-size: 18px; font-weight:normal;font-family:Microsoft Yahei;color:#5173bd;}
.listcon .news_list .news_box p{padding:5px 15px;}
js
$(document).ready(function(){
$(.listshow).find(.wp_paging).hide();
var $container = $('.listshow');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.news_list'
//columnWidth: 5
});
});
$container.infinitescroll({
navSelector : '.wp_paging',
nextSelector : '.wp_paging .next',
itemSelector : '.news_list',
loading: {
finishedMsg: '加载完毕!',
img: 'images/loading.gif'
}
},function(newElements){
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({opacity:1});
$container.masonry( 'appended', $newElems, true );
});
}
);
});
瀑布流布局.zip