简单js瀑布流写法

勇旭分享的简单js瀑布流写法

视图层写法html

<style type="text/css">
    .pictureflow{width:700px;}
    .pictureflow .imglist{width:210px;padding:2px 5px; margin:5px; height:100%; border:1px solid #ccc; overflow:hidden;float:left; }
    .pictureflow .imglist .imgo{margin:0 auto;padding-top:5px;}
    .pictureflow .imglist .imgo img{width:200px;border:1px solid #ccc; overflow:hidden;}
</style>

    <div class="pictureflow"></div>

</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".pictureflow").pictureflow();
    });
    $.fn.extend({
        pictureflow:function(options){
            // 用的时候参数别写错了
            var settings = $.extend({
                'col': 3,
                'width': '500',
                'url':''
            }, options);
            var indexpage = 1;	// 备用(无用)
            var pcount = 10;	// 备用(无用)
            var obj = $(this);
            // 生成div个数
            for(var i = 0; i < settings.col; i++){
                $(obj).append("<div class='imglist'></div>");
            }
            function win_bottom(){
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    $(window).unbind("scroll");	// 解除绑定  加载完图片继续绑定（绑定在下边）
                    addimg();
                }
            }
            $(window).bind("scroll", win_bottom);
            var ajaxNum = 1;
            function addimg(){
                var jpg = 0;
                var html = '';
                var imgo = '';
                var imgo_h = 0;
                for(var i = 0; i < pcount; i++){
                    if(ajaxNum == 1){
                        jpgindex = Math.ceil(Math.random()*100) % 6;
                    }else{
                        $.ajax({
                            type : 'POST',
                            url  : '<?= Yii::app()->createUrl('ams/xu/getAjaxPic');?>',
                            data : {jpgindex : ajaxNum},
                            success : function(msg){
                                jpgindex = msg;
                            }
                        })
                    }

                    html = "<div class='imgo'>";
                    html += "<img src='ams/upload/dealerImage/" + jpgindex + ".jpg'";
                    html += '</div>';

                    // 找到高度最小的一个
                    imgo = $(obj).find(".imglist").eq(0);
                    imgo_h = imgo.height();
                    $(obj).find(".imglist").each(function(){
                        if(imgo_h > $(this).height()){
                            imgo = $(this);
                            imgo_h = imgo.height();
                        }
                    });
                    $(imgo).append(html);
                }
                if(ajaxNum == 7){
                    ajaxNum = 1;
                }else{
                    ajaxNum++;
                }

                // 重新绑定事件
                $(window).bind("scroll", win_bottom);
            }
            addimg();
        }
    });
</script>

控制器层，滚动条通过ajax加载数据，图片的相关信息

    public function actionGetAjaxPic(){
        echo $_POST['jpgindex']+1;
    }