<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片版瀑布流</title>
<style type="text/css">
.box{
width: 850px;
border: 1px purple solid;
position: relative;
margin:0 auto;
min-width: 220px;
}
.box img{
width: 200px;
position: absolute;
transition:0.5s;
}
</style>
</head>
<body>
<div>
<!-- 進(jìn)度條 -->
<progress min="0" max="100" value="0" id="progress" ></progress>
</div>
<div class="box">
</div>
</body>
<script type="text/javascript">
var progress = document.getElementById("progress");
var box = document.getElementsByClassName('box')[0];
var heightArr = [];
var count = 0;
var arr = ["wk1.png", "bg.png", "cold.png", "wm.png"]
var imgArr = [];
for(var j = 0; j < 16; j++){
var readyImg = new Image();
imgArr.push(readyImg);
readyImg.src = "imgs/P_0" + j + ".jpg";
readyImg.onload = function(){
count++;
progress.value = (count / 16) * 100;
if(count == 16){
start();
// 把改變窗口方法放在預(yù)加載里，否則當(dāng)圖片加載時(shí)拖動(dòng)窗口圖片會(huì)一張一張顯示
re();
}
}
}
// 加一個(gè)開關(guān)讓過渡有效果,否則再次調(diào)用start方法時(shí)，會(huì)把img再次插入，transtion不會(huì)有用
var isFirst = true;
function start(){
// ****************************************
// onresize里面的方法放上來為了讓刷新頁面的時(shí)候也會(huì)發(fā)生變化
var l = parseInt((window.innerWidth - 16)/200);
// 當(dāng)窗口移動(dòng)的范圍很小時(shí)肮塞，還是當(dāng)前列數(shù)時(shí)，不用重新布局，直接return
// 當(dāng)l為0時(shí)heightArr.length為0函卒，刷新頁面下面不會(huì)執(zhí)行钟鸵，所以會(huì)堆疊在一起
if(heightArr.length ==l && l !=0){
return;
}
console.log("重新布局");
//如果窗口列數(shù)不足一列钉稍，也要保證heightArr.length的長度為1
//當(dāng)l為0時(shí)，heightArr.length為1棺耍；(至少放一列)
heightArr.length = l == 0 ? 1 : l;
box.style.width = 210 * l + "px";
for(var i=0; i <heightArr.length; i++){
heightArr[i] = 0;
}
// **********************************************
// 比較每列數(shù)組的長度贡未，將生成的圖片插入長度最小的數(shù)組
for(var i = 0; i < 16; i++){
var img = imgArr[i]
var minIndex = 0;
for(var j = 1; j < heightArr.length; j++){
if (heightArr[minIndex] > heightArr[j]) {
minIndex = j;
}
}
img.style.left = minIndex * 210 + "px";
img.style.top = heightArr[minIndex] + "px";
if(isFirst){
box.appendChild(img);
}
heightArr[minIndex] += (img.offsetHeight + 10);
}
isFirst = false;
}
// 改變窗口大小，讓整個(gè)box的寬度
function re(){
window.onresize = function(){
start();
}
}
</script>
</html>
瀑布流預(yù)加載和響應(yīng)式布局
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來取董，“玉大人棍苹，你說我怎么就攤上這事∫鹛” “怎么了枢里？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長蹂午。 經(jīng)常有香客問我栏豺，道長，這世上最難降的妖魔是什么豆胸？ 我笑而不...
- 正文 為了忘掉前任奥洼，我火速辦了婚禮，結(jié)果婚禮上晚胡，老公的妹妹穿的比我還像新娘灵奖。我一直安慰自己，他們只是感情好估盘，可當(dāng)我...
- 文/花漫 我一把揭開白布瓷患。 她就那樣靜靜地躺著，像睡著了一般遣妥。 火紅的嫁衣襯著肌膚如雪擅编。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼吆豹，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼！你這毒婦竟也來了理盆？” 一聲冷哼從身側(cè)響起痘煤，我...
- 序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎猿规，沒想到半個(gè)月后衷快，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡姨俩，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年蘸拔，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了师郑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
- 正文 年R本政府宣布，位于F島的核電站缔恳，受9級(jí)特大地震影響宝剖，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜歉甚，卻給世界環(huán)境...
- 文/蒙蒙 一万细、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧纸泄，春花似錦赖钞、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至咧虎，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間计呈，已是汗流浹背砰诵。 一陣腳步聲響...
- 正文 我出身青樓，卻偏偏與公主長得像扶歪，于是被迫代替她去往敵國和親理肺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 先聲明一個(gè)數(shù)組善镰，再創(chuàng)建img妹萨，再放進(jìn)數(shù)組里，不讓它被回收炫欺，當(dāng)設(shè)置src時(shí)乎完，就會(huì)發(fā)出請(qǐng)求，下載圖片的路徑品洛，把所有的圖...
- 瀑布流這項(xiàng)技術(shù)在現(xiàn)在很流行树姨，各大網(wǎng)站摩桶，特別是關(guān)于的圖片的網(wǎng)站都在利用這項(xiàng)技術(shù)來進(jìn)行圖片的布局，來吸引客戶的眼...
- 人生就像一列開往墳?zāi)沟牧熊嚸本荆吠旧蠒?huì)有很多站硝清，很難有人至始至終陪你走完全程，當(dāng)陪你的人要下車時(shí)转晰，即便不舍芦拿，也要心存...
- 徐徐展開歷史畫卷防嗡，秦朝那一筆格外濃墨重彩，引人注目侠坎，秦始皇嬴政掃六合蚁趁，一統(tǒng)天下，建立起中國古代第一個(gè)大一統(tǒng)王朝实胸。今...
