于是我想到了用window.onresize來(lái)使得瀑布流函數(shù)從新加載來(lái)達(dá)到目的，

代碼如下:
window.onload=function(){
//瀑布流函數(shù)
waterfall('content','box');
//模擬數(shù)據(jù)加載
var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}
//當(dāng)屏幕大小改變時(shí)從新執(zhí)行瀑布流函數(shù) 達(dá)到從新適應(yīng)的作用
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var oparent = document.getElementById('content');
//將熏染的數(shù)據(jù)添加入html中
for(var i=0;i var obox = document.createElement("div");
obox.className = "box";
oparent.appendChild(obox);
var opic = document.createElement("div");
opic.className = "pic";
obox.appendChild(opic);
var oImg = document.createElement("img");
oImg.src="img/"+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('content','box');
}
}
}

當(dāng)屏幕縮小時(shí)是可以的，但是從縮小的放大就出現(xiàn)了BUG

看沒(méi)看到后面幾列的頂部回不來(lái)了，
于是我打開開發(fā)工具看是怎么回事，

第3 4 5個(gè)div中不應(yīng)該有style,是因?yàn)榭s小的時(shí)候給他添加上去的，而放大了他沒(méi)有清除所以保留下來(lái)了就會(huì)出現(xiàn)這個(gè)樣子于是：我在瀑布流函數(shù)里加了句aBox[i].style.cssText ='';使得每次進(jìn)來(lái)都清空style

代碼如下:
function waterfall(parent,box){
//將content下所有class box取出來(lái)
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//獲取盒子的寬度
var aBoxW = aBox[0].offsetWidth;
//用瀏覽器的可是寬度除以box寬度 得到列數(shù)
var cols = Math.floor(document.documentElement.clientWidth/aBoxW);
//設(shè)定 content的寬度 和居中
aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';
//創(chuàng)建每一列的高度數(shù)組
var hArr=[];
for(var i=0; i aBox[i].style.cssText ='';
if(i hArr.push(aBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH); //找出高最矮的 索引值
//console.log(aBoxW);
aBox[i].style.position = 'absolute';
aBox[i].style.top = minH+'px';
aBox[i].style.left = aBoxW*index+'px';
hArr[index]+=aBox[i].offsetHeight;
}
}
}

這樣就解決了縮小后回不來(lái)的BUG，可以正常自適應(yīng)了

最后我把整個(gè)的javascript 貼出來(lái)

代碼如下:
window.onload=function(){
//瀑布流函數(shù)
waterfall('content','box');
//模擬數(shù)據(jù)加載
var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"06.jpg"},{"src":"07.jpg"}]}
//當(dāng)屏幕大小改變時(shí)從新執(zhí)行瀑布流函數(shù) 達(dá)到從新適應(yīng)的作用
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var oparent = document.getElementById('content');
//將熏染的數(shù)據(jù)添加入html中
for(var i=0;i var obox = document.createElement("div");
obox.className = "box";
oparent.appendChild(obox);
var opic = document.createElement("div");
opic.className = "pic";
obox.appendChild(opic);
var oImg = document.createElement("img");
oImg.src="img/"+dataInt.data[i].src;
opic.appendChild(oImg);
}
waterfall('content','box');
}
}

}
function waterfall(parent,box){
//將content下所有class box取出來(lái)
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);

//獲取盒子的寬度
var aBoxW = aBox[0].offsetWidth;
//用瀏覽器的可是寬度除以box寬度 得到列數(shù)
var cols = Math.floor(document.documentElement.clientWidth/aBoxW);
//設(shè)定 content的寬度 和居中
aParent.style.cssText = 'width:'+aBoxW*cols+'px;height:auto;position: relative; margin:0 auto;padding-right:15px';
//創(chuàng)建每一列的高度數(shù)組
var hArr=[];
for(var i=0; i aBox[i].style.cssText ='';
if(i hArr.push(aBox[i].offsetHeight);
}else{
var minH = Math.min.apply(null,hArr);
var index = getMinIndex(hArr,minH); //找出高最矮的 索引值
//console.log(aBoxW);
aBox[i].style.position = 'absolute';
aBox[i].style.top = minH+'px';
aBox[i].style.left = aBoxW*index+'px';
hArr[index]+=aBox[i].offsetHeight;
}
}
}
//根據(jù)class獲取到元素
function getBclass(parent,className){
var boxarr = new Array(); //用來(lái)存儲(chǔ)獲取到的class
//console.log(parent.prototype);
allElement=parent.getElementsByTagName('*');
for(var i=0;i if(allElement[i].className == className){
boxarr.push(allElement[i]);
}
}
return boxarr;
}

//找出高最矮的 索引值
function getMinIndex(arr,value){
for(var i in arr){
if (arr[i]==value){
return i;
}
}
}
//建立一個(gè)檢測(cè)輪輪滑動(dòng)是否成立的函數(shù) 返回真假
function checkScroll(){
var oparent = document.getElementById("content");
var oBox = getBclass(oparent,'box');
var lastoBoxTop = oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);
//console.log(lastoBoxTop);
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
//console.log(scrollTop);
return(lastoBoxTop }

css文件貼出來(lái)

代碼如下:
*{margin: 0;padding: 0;}
body{background-color: #eee;}
.content{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #CCCCCC;
border-radius: 5px;
background: #fff;
}
.pic img{
width: 220px;
height: auto;
border: 1px solid #eee;
}

html文件貼出來(lái)

代碼如下:

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com