1、頁面佈局及樣式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float:left;
}
.pic{
padding: 10px;
border:1px solid #ccc;
pic-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.pic img{
width:162px;
height:auto;
}
</style>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="./images/1.jpg"/>
</div>
</div>
<!-- ......
............
............-->
<div class="box">
<div class="pic">
<img src="./images/21.jpg"/>
</div>
</div>
</div>
</body>
</html>JavaScript實現
window.οnlοad=function(){
waterfall('main','box');
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},
{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'},{'src':'10.jpg'},
{'src':'11.jpg'},{'src':'12.jpg'},{'src':'13.jpg'},{'src':'14.jpg'},{'src':'15.jpg'},
{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'},{'src':'19.jpg'},{'src':'20.jpg'},
{'src':'21.jpg'},{'src':'22.jpg'},{'src':'23.jpg'},{'src':'24.jpg'},{'src':'25.jpg'},
{'src':'26.jpg'},{'src':'27.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'}]};
window.οnscrοll=function(){
if(checkscrollside()){
//將數據塊渲染到當前頁面尾部
var oParent = document.getElementById('main');// 父級對象
for(var i=0;i<dataInt.data.length;i++){
var obox=document.createElement('div'); //添加 元素節點
obox.className='box'; //添加 類名 name屬性
oParent.appendChild(obox); //添加 子節點
var opic=document.createElement('div');
opic.className='pic';
obox.appendChild(opic);
var oImg=document.createElement('img');
oImg.src='./images/'+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('main','box');
};
}
}
/*
parend 父級id
box 元素id
*/
function waterfall(parent,box){
var oParent=document.getElementById(parent);// 父級對象
var abox=getClassObj(oParent,box);// 獲取存儲塊框box的數組abox
var iboxW=abox[0].offsetWidth;// 一個塊框box的寬
var num=Math.floor(document.documentElement.clientWidth/iboxW);//每行中能容納的box個數【窗口寬度除以一個塊框寬度】
oParent.style.cssText='width:'+iboxW*num+'px;margin:0 auto;';//設置父級居中樣式：定寬+自動水平外邊距
var boxHArr=[];//用於存儲 每列中的所有塊框相加的高度。
for(var i=0;i<abox.length;i++){//遍歷數組abox的每個塊框元素
var boxH=abox[i].offsetHeight;
if(i<num){
boxHArr[i]=boxH; //第一行中的num個塊框box 先添加進數組boxHArr
}else{
var minH=Math.min.apply(null,boxHArr);//數組boxHArr中的最小值minH
var minHIndex=getminHIndex(boxHArr,minH);
abox[i].style.position='absolute';//設置絕對位移
abox[i].style.top=minH+'px';
abox[i].style.left=abox[minHIndex].offsetLeft+'px';
//abox[i].style.left=iboxW*minHIndex+'px';
//數組 最小高元素的高 + 添加上的abox[i]塊框高
boxHArr[minHIndex]+=abox[i].offsetHeight;//更新添加了塊框後的列高
}
}
}
/****
*通過父級和子元素的class類 獲取該同類子元素的數組
*/
function getClassObj(parent,className){
var obj=parent.getElementsByTagName('*');//獲取 父級的所有子集
var boxS=[];//創建一個數組 用於收集子元素
for (var i=0;i<obj.length;i++) {//遍歷子元素、判斷類別、壓入數組
if (obj[i].className==className){
boxS.push(obj[i]);
}
};
return boxS;
}
/****
*獲取 box高度 最小值的索引index
*/
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}
//判斷是否具備了滾動加載數據塊的條件
function checkscrollside(){
var oParent=document.getElementById('main');
var abox=getClassObj(oParent,'box');//取出所有box
var lastboxH=abox[abox.length-1].offsetTop+Math.floor(abox[abox.length-1].offsetHeight/2);//創建【觸發添加塊框函數waterfall()】的高度：最後一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解決兼容性
var documentH=document.documentElement.clientHeight;//頁面高度，窗口高度
return (lastboxH<scrollTop+documentH)?true:false;//到達指定高度後 返回true，觸發waterfall()函數
}jQuery實現
$( window ).on( "load", function(){
waterfall();
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.οnscrοll=function(){
if(checkscrollside()){
$.each( dataInt.data, function( key, value ){
var obox = $('<div>').addClass('box').appendTo($( "#main" ) );
var opic = $('<div>').addClass('pic').appendTo($(obox));
$('<img>').attr('src','./images/' + $(value).attr('src') ).appendTo($(opic));
});
waterfall();
};
}
});
function waterfall(){
var $abox = $( "#main>div" );
var iboxW = $abox.eq( 0 ).outerWidth();// 一個塊框box的寬
var num = Math.floor( $( window ).width() / iboxW );//每行中能容納的box個數【窗口寬度除以一個塊框寬度】
$( "#main" ).css({
'width' : iboxW * num,
'margin': '0 auto'
});
var boxHArr=[];//用於存儲 每列中的所有塊框相加的高度。
$abox.each( function( index, value ){
var boxH = $abox.eq( index ).outerHeight();
if( index < num ){
boxHArr[ index ] = boxH; //第一行中的num個塊框box 先添加進數組boxHArr
}else{
var minH = Math.min.apply( null, boxHArr );//數組boxHArr中的最小值minH
var minHIndex = $.inArray( minH, boxHArr );
$( value ).css({
'position': 'absolute',
'top': minH + 'px',
//'left': $abox.eq( minHIndex ).position().left
'left': minHIndex*iboxW+'px'
});
//數組 最小高元素的高 + 添加上的abox[i]塊框高
boxHArr[ minHIndex ] += $abox.eq( index ).outerHeight();//更新添加了塊框後的列高
}
});
}
function checkscrollside(){
var $lastBox = $( "#main>div" ).last();
var lastboxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);//創建【觸發添加塊框函數waterfall()】的高度：最後一個塊框的距離網頁頂部+自身高的一半(實現未滾到底就開始加載)
var scrollTop = $( window ).scrollTop()//注意解決兼容性
var documentH = $( window ).height();//頁面高度
return (lastboxDis < scrollTop + documentH ) ? true : false;//到達指定高度後 返回true，觸發waterfall()函數
}