js 瀑布流 绝对定位 练习
2017-10-24 本文已影响0人
玲珑花
思路：
每个div盒子决定定位，计算left和top
就分为两种情况。
第一行和非第一行
第一行，就是普通的div排列，display: inline-block;
从第二行开始，计算下一个div应该放到最短的div下面，依次类推
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单瀑布流 js实现</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>
蝶恋花·伫倚危楼风细细
<br /> 宋代：柳永
<br /> 伫倚危楼风细细，望极春愁，黯黯生天际。
<br />草色烟光残照里，无言谁会凭阑意。(阑 通 栏)
<br /> 拟把疏狂图一醉，对酒当歌，强乐还无味。
<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 />金风玉露一相逢，便胜却人间无数。<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); //找到当前显示最矮的元素
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
