基于Jquery的瀑布流布局（绝对定位）

setwaterfall插件

使用方法：

1. 导入jquery和setwaterfall插件，可直接查看源代码script id=&https://csswang.com/8221;setwaterfall&https://csswang.com/8221;为该插件，或者点击setwaterfall.js
2. 如$(&https://csswang.com/8220;li&https://csswang.com/8221;).setwaterfall()，li为要瀑布流化的元素
3. 设置相应的css，要求父层定位为position：relative；瀑布流的元素定位为position：absolute
4. 根据需要设置宽和高，padding和mairgin

最终效果图:

再简单看下代码，这个不是重点。

就是外层定义一个容器（这里是article定义宽度为900px，然后是4列的容器，常见的浮动布局，css非常简单，当然这个是根据你的实际情况。

div.col {width:220px;float:left;margin-right:20px;_overflow:hidden;word-break:break-all;}
div.photowrap {border-radius:2px;clear:both;overflow:hidden;background-color:https://csswang.com/FFF;padding:1px 0 20px 0;margin:10px 0;_zoom:1}

重点（动态加载和滚动触发）

每当有一个新元素加载进去需要进行一次判断，选择高度最低的那一列（div.col），这里我简单写了一个js插件进行判断：

(function ($) {
$.fn.findlowest = function () {
var _height = 99999;
var element = null;
$(this).each(function(){
if($(this).height()<_height)
{
_height = $(this).height();
element = $(this);
}
})
return element;
};
})(jQuery);

具体使用如下：

var lowestdiv = $("div.col").findlowest();
var photo = $($tmpl).tmpl(photos[i]);
lowestdiv.append(photo);
photo.animate({opacity: 1},600);

这里推荐一个jquery的插件，可以很方便的将json数据格式转成html布局进行插入，也就是上面代码的$($tmpl).tmpl(photos[i])部分，搜一下jquery tmpl应该就有了。

通过上面代码就可以实现把每一个新加的元素合理插入现有的布局里。
再发一段滚动加载的代码，实现的效果是滚动条到达底部200px时会触发事件，我项目里是去后台拿去json数据，再通过tmpl插件插入页面。

var clienth = document.documentElement.clientHeight;
var scrollh = document.documentElement.scrollHeight;
var scrollt = document.documentElement.scrollTop;
if(clienth+scrollt+200>scrollh)
{
$("body").directpost(Verififunc,null,"/Admin/Photos/GetNewPhotos",Callbackfunc);
}

directpost是我自己写的一个插件，基于$.ajax，可以把页面上的全部表单元素提交到后台，同时有验证函数和回调函数，有需要的童鞋可以收藏下，再自己进行修改，具体如下:

(function ($) {
$.fn.directpost = function (verififunc,options,url,callbackfunc) {
var verification = verififunc();
if(!verification)
{
return false;
}
var defaultPara = [];
$(this).find("input[type='text']").each(function(){
defaultPara.push({name:$(this).attr("name"),value:$(this).val()});
});
$(this).find("input[type='password']").each(function(){
defaultPara.push({name:$(this).attr("name"),value:$(this).val()});
});
$(this).find("input[type='hidden']").each(function(){
defaultPara.push({name:$(this).attr("name"),value:$(this).val()});
});
var selectgroups = "";
$(this).find("input[type='checkbox']:checked").each(function(){
if($(this).attr("value")!="")
{
selectgroups = selectgroups + $(this).val()+",";
}
});
if(selectgroups!="")
{
defaultPara.push({name:$("input[type='checkbox']:checked").attr("name"),value:selectgroups});
};
if(options!=null)
{
defaultPara = defaultPara.concat(options);
}
$.ajax({
type:"POST",
beforeSend: function () { $("body").showLoading() },
complete:function () { $("body").hideLoading() },
url:url,
data:defaultPara,
success:function(result){
if(callbackfunc && typeof (callbackfunc) === 'function') {
callbackfunc(result);
}
}
});
};
})(jQuery);

verification是进行表单验证，callbackfunc在ajax调用后执行。最终就实现了滚动动态加载的瀑布流布局，但缺点就是固定了容器（这里是article）的宽度，要让宽度自适应，必须用绝对定位和js实现，会在下篇文章介绍。

本文链接：» https://www.csswang.com/exp/2458

转载请注明本文来源出处。