思路：
每個div盒子決定定位夭织，計算left和top
就分為兩種情況。
第一行和非第一行
第一行吠撮，就是普通的div排列尊惰，display: inline-block;
從第二行開始，計算下一個div應(yīng)該放到最短的div下面泥兰，依次類推
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡單瀑布流 js實現(xiàn)</title>
<style>
#container {
position:relative;
}
#container .box {
/*background-color: #ddd;*/
width: 200px;
display: inline-block;
position: absolute;
box-shadow: 0px 0px 8px 1px #888;
border-radius: 3px;
text-align: center;
/*transition: left .3s ease-in-out, top .3s ease-in-out;*/
/*不能添加外邊距屬性*/
}
#container .box img {
min-height: 150px;
}
#container .box div {
min-height: 50px;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div>
擊壤歌 先秦：佚名<br /> 日出而作弄屡，日入而息。 <br/>鑿井而飲逾条，耕田而食琢岩。<br /> 帝力于我何有哉！
</div>
</div>
<div class="box">
<div>
蝶戀花·佇倚危樓風(fēng)細(xì)細(xì)
<br /> 宋代：柳永
<br /> 佇倚危樓風(fēng)細(xì)細(xì)师脂，望極春愁担孔，黯黯生天際。
<br />草色煙光殘照里吃警，無言誰會憑闌意糕篇。(闌 通 欄)
<br /> 擬把疏狂圖一醉，對酒當(dāng)歌酌心，強(qiáng)樂還無味拌消。
<br />衣帶漸寬終不悔，為伊消得人憔悴安券。 </div>
</div>
<div class="box">
<div>
鳳求凰
<br /> 兩漢：司馬相如
<br /> 有美一人兮墩崩，見之不忘。
<br /> 一日不見兮侯勉，思之如狂鹦筹。
<br /> 鳳飛翱翔兮，四海求凰址貌。
<br /> 無奈佳人兮铐拐，不在東墻。
<br /> 將琴代語兮练对，聊寫衷腸遍蟋。
<br /> 何時見許兮，慰我彷徨螟凭。
<br /> 愿言配德兮虚青，攜手相將。
<br /> 不得於飛兮螺男，使我淪亡挟憔。
</div>
</div>
<div class="box">
<div>
鵲橋仙·纖云弄巧<br />
<br /> 宋代：秦觀
<br />
<br /> 纖云弄巧钟些，飛星傳恨烟号，銀漢迢迢暗度绊谭。
<br />金風(fēng)玉露一相逢，便勝卻人間無數(shù)汪拥。<br /> 柔情似水达传，佳期如夢，忍顧鵲橋歸路迫筑。
<br />兩情若是久長時宪赶，又豈在朝朝暮暮。 </div>
</div>
<div class="box">
<div>
1 </div>
</div>
<div class="box">
<div>
2 </div>
</div>
<div class="box">
<div>
3 </div>
</div>
<div class="box">
<div>
4</div>
</div>
<div class="box">
<div>
5 </div>
</div>
<div class="box">
<div>
6 </div>
</div>
<div class="box">
<div>
7 </div>
</div>
<div class="box">
<div>
9 </div>
</div>
</div>
<script>
function calculate() {
var arrdiv = document.getElementsByClassName("box");
var clientWidth = document.documentElement.clientWidth;
//一行能放置幾個div div的寬度+間隔的距離
var n = Math.floor(clientWidth / (200 + 15));
var arrdivrow = [];
for(var i = 0; i < arrdiv.length; i++) {
//第一行
if(i < n) {
//擺放第一行div元素
arrdiv[i].style.top = 15 + 'px';
arrdiv[i].style.left = i * (arrdiv[i].offsetWidth + 15) + 'px';
arrdivrow[i] = arrdiv[i];
} else {
// setTimeout(function(arrdiv,arrdivrow) {
var minheight = findMin(arrdivrow); //找到當(dāng)前顯示最矮的元素
arrdiv[i].style.top = arrdivrow[minheight].offsetTop + arrdivrow[minheight].offsetHeight + 20 + 'px';
arrdiv[i].style.left = arrdivrow[minheight].offsetLeft + 'px';
//替換最矮
arrdivrow.splice(minheight, 1, arrdiv[i]);
// }, 300);
}
}
}
function findMin(arr) {
var m = 0;
for(var i = 0; i < arr.length; i++) {
m = Math.min(arr[m].offsetHeight + arr[m].offsetTop, arr[i].offsetHeight + arr[i].offsetTop) == arr[m].offsetHeight + arr[m].offsetTop ? m : i;
}
return m;
}
window.onresize = function() {
calculate();
}
new calculate();
</script>
</body>
</html>
效果圖
Paste_Image.png
