<!--瀑布流布局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>

/*列表页*/
.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;}

$(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 );
            });
        }
    );
});