仿yiichina网站瀑布流效果yii2 [ 2.0 版本 ]

模仿yiichina网站案例板块瀑布流效果实例。视图所需JS直接用案例板块页面引用的JS即可
控制器动作

public function actionWater($page=0)
{
    $page=Yii::$app->request->get('page');
    $model=testTable::find();
    $pagination = new Pagination([
        'defaultPageSize' => 8,
        'totalCount' => $model->count(),
    ]);
    $models = $model->orderBy('id DESC')
                    ->offset($pagination->offset)
                    ->limit($pagination->limit)
                    ->all();
    if($page>=(int)((int)$pagination->totalCount/(int)$pagination->defaultPageSize)){return false;}
    return $this->render('html5',['model'=>$models,'pagination'=>$pagination]);
}

视图层：

<?php
use \yii\helpers\html;
use yii\widgets\LinkPager;
?>
<style>
    ul > li:first-child{position: absolute; left: 0px; top: 0px;}
    ul > li:nth-child(2){position: absolute; left: 219px; top: 0px;}
    ul > li:nth-child(3){position: absolute; left: 438px; top: 0px;}
    ul > li:nth-child(4){position: absolute; left: 658px; top: 0px;}
    ul > li:nth-child(5){position: absolute; left: 219px; top: 357px;}
    ul > li:nth-child(6){position: absolute; left: 658px; top: 404px;}
    ul > li:nth-child(7){position: absolute; left: 438px; top: 576px;}
    ul > li:nth-child(8){position: absolute; left: 219px; top: 789px;}
    ul > li:nth-child(9){position: absolute; left: 658px; top: 911px;}
    ul > li:nth-child(10){position: absolute; left: 438px; top: 959px;}
</style>
<div class="wrap">
        <div class="row">
            <div class="col-lg-9">
                <div id="w0" class="list-view">
                    <ul style="position: relative; height: 2648.55px;" class="case-list">
                        <?php foreach($model as $k=>$v):?>
                        <li class="col-lg-3 col-md-3" data-key="<?=$v['id']?>"><div class="thumbnail"><a href="http://www.yiichina.com/case/121"><img src="http://www.yiichina.com/uploads/cases//121_thumb.jpg" alt=""></a><h2><a href="http://www.yiichina.com/case/121"><?=$v['title']?></a></h2><div class="media"><div class="media-left"><a title="" data-original-title="" href="http://www.yiichina.com/user/27438" rel="author"><img class="media-object" src="http://www.yiichina.com/uploads/cases/38_avatar_small.jpg" alt="newbie"></a></div><div class="media-body"><h2 class="media-heading"><a title="" data-original-title="" href="http://www.yiichina.com/user/27438" rel="author">newbie</a></h2><p class="time"><?=$v['content']?></p></div></div></div></li>
                       <?php endforeach;?>
                    </ul>
                    <!--<ul class="pagination">-->
                </div>
            </div>
            </div>
        </div>
<div style="display: none"><?php echo LinkPager::widget(['pagination' => $pagination])?><!--</ul>--></div>
<script src="/statics/common/js/jquery-2.1.4.js"></script>
<script src="/statics/common/js/jquery.infinitescroll.min.js"></script>
<script src="/statics/common/js/jquery.imagesloaded.min.js"></script>
<script src="/statics/common/js/masonry.pkgd.min.js"></script>
<script src="/statics/common/js/yii.js"></script>
<script src="/statics/common/js/perfect-scrollbar.jquery.min.js"></script>
<script src="/statics/common/js/main.js"></script>
<script src="/statics/common/js/bootstrap.js"></script>
<script src="/statics/common/js/scrollpagination.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        var $container = $(".case-list");
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector: ".case-list li",
                isAnimated: true
            });
        });
        $container.infinitescroll({
            navSelector: "#pagenavi",
            nextSelector: '#pagenavi a:eq(6)',
            itemSelector: ".case-list li",
            animate: true,
            bufferPx: 1200,
            loading: {
                finishedMsg: 'The END!',
                img: '6RMhx.gif'
            }
        }, function(newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $container.imagesLoaded(function() {
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });
        });
    });
</script>