勇旭分享的简单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;
}