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