html布局结构瀑布流，三种⽅式实现瀑布流布局分别使⽤javascript，jquery，css实现瀑布流布局：
第⼀种⽅式：使⽤JavaScript：
瀑布流布局
*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
waterfall('main','box');
//模拟json数据
var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},
{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; //监听scroll事件
var isPosting = false;
if(checkScollSlide('main','box') && !isPosting){
var oParent = ElementById('main');
for(var i in dataJson.data){
isPosting = true;
var oBox = ateElement('div');
oBox.className = 'box';
oBox.innerHTML = '
';
oParent.appendChild(oBox);
}
isPosting = false;
waterfall('main','box');
}
}
}
/*
* parent ⽗元素id clsName 块元素类*/
function waterfall(parent,clsName){
//获取⽗元素
var oParent = ElementById(parent),
//获取所有box
aBoxArr = ElementsByClassName(clsName),
//单个box宽度
iBoxW = aBoxArr[0].offsetWidth,
/
/ 列数
cols = Math.floor(document.documentElement.clientWidth / iBoxW);
oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';
//储存所有的⾼度
var hArr = [];
for(var i = 0; i < aBoxArr.length; i++){
if(i < cols){
hArr[i] = aBoxArr[i].offsetHeight;
}else{
//获取hArr最⼩值
var minH = Math.min.apply(null,hArr),
/
/ hArr最⼩值索引index
minHIndex = getMinHIndex(hArr,minH);
aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;'; //添加元素之后更新hArr
hArr[minHIndex] += aBoxArr[i].offsetHeight;
}
}
}
//获取最⼩值索引
function getMinHIndex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//检查是否满⾜加载数据条件,parent ⽗元素id clsName 块元素类
function checkScollSlide(parent,clsName){
var oParent = ElementById(parent),
aBoxArr = ElementsByClassName(clsName),
// 最后⼀个box元素的offsetTop+⾼度的⼀半
lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
//兼容js标准模式和混杂模式
scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
height = document.documentElement.clientHeight || document.body.clientHeight;
return lastBoxH < scrollTop + height ? true : false;
}
第⼆种⽅式：使⽤jquery：(html结构跟css同上)
$( window ).on( "load", function(){
waterfall('main','box');
//模拟数据json
var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},
{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]}; window.οnscrοll=function(){
var isPosting = false;
if(checkscrollside('main','box') && !isPosting){
isPosting = true;
$.each(dataJson.data,function(index,dom){
var $box = $('
$box.html('
');
borderbox$('#main').append($box);
waterfall('main','box');
isPosting = false;
});
}
}
});
/*
parend ⽗级id
clsName 元素class
*/
function waterfall(parent,clsName){
var $parent = $('#'+parent);//⽗元素
var $boxs = $parent.find('.'+clsName);//所有box元素
var iPinW = $boxs.eq( 0 ).width()+15;// ⼀个块框box的宽
var cols = Math.floor( $( window ).width() / iPinW );//列数
$parent.width(iPinW * cols).css({'margin': '0 auto'});
var pinHArr=[];//⽤于存储 每列中的所有块框相加的⾼度。
$boxs.each( function( index, dom){
if( index < cols ){
pinHArr[ index ] = $(dom).height(); //所有列的⾼度
}else{
var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最⼩值minH
var minHIndex = $.inArray( minH, pinHArr );
$(dom).css({
'position': 'absolute',
'top': minH + 15,
'left': $boxs.eq( minHIndex ).position().left
});
//添加元素后修改pinHArr
pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列⾼
}
});
}
//检验是否满⾜加载数据条件，即触发添加块框函数waterfall()的⾼度：最后⼀个块框的距离⽹页顶部+⾃⾝⾼的⼀半(实现未滚到底就开始加载)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。