<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>仿写瀑布流</title>
<style>
* {
margin: 0;
padding: 0;
}
.item {
float: left;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: 700;
color: aliceblue;
margin-right: 15px;
margin-bottom: 15px;
width: 205px;
position: absolute;
}
.item-1 {
background-color: rgb(206, 169, 169);
height: 300px;
}
.item-2 {
background-color: rgb(131, 226, 174);
height: 150px;
}
.item-3 {
background-color: rgb(77, 30, 30);
height: 350px;
}
.item-4 {
background-color: rgb(49, 62, 134);
height: 300px;
}
.item-5 {
background-color: rgb(230, 99, 99);
height: 200px;
}
.item-6 {
background-color: rgb(206, 169, 169);
height: 300px;
}
.item-7 {
background-color: rgb(124, 126, 145);
height: 400px;
}
.item-8 {
background-color: rgb(169, 199, 38);
height: 230px;
}
.item-9 {
background-color: rgb(114, 128, 53);
height: 300px;
}
.item-10 {
background-color: rgb(48, 54, 18);
height: 260px;
}
.item-11 {
background-color: rgb(118, 122, 96);
height: 230px;
}
.item-12 {
background-color: rgb(118, 122, 96);
height: 240px;
}
.item-13 {
background-color: rgb(118, 122, 96);
height: 250px;
}
.item-14 {
background-color: rgb(118, 122, 96);
height: 270px;
}
.item-15 {
background-color: rgb(118, 122, 96);
height: 330px;
}
.item-16 {
background-color: rgb(118, 122, 96);
height: 200px;
}
.item-17 {
background-color: rgb(118, 122, 96);
height: 100px;
}
.item-18 {
background-color: rgb(118, 122, 96);
height: 400px;
}
.item-19 {
background-color: rgb(118, 122, 96);
height: 340px;
}
.item-20 {
background-color: rgb(118, 122, 96);
height: 350px;
}
.item-21 {
background-color: rgb(118, 122, 96);
height: 360px;
}
.item-22 {
background-color: rgb(118, 122, 96);
height: 370px;
clear: both;
}
#box{
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
<div class="item item-11">11</div>
<div class="item item-12">12</div>
<div class="item item-13">13</div>
<div class="item item-14">14</div>
<div class="item item-15">15</div>
<div class="item item-16">16</div>
<div class="item item-17">17</div>
<div class="item item-18">18</div>
<div class="item item-19">19</div>
<div class="item item-20">20</div>
<div class="item item-21">21</div>
<div class="item item-22">22</div>
</div>
</body>
<script>
// var num = Math.floor(Math.random() * (20 - 1)) + 1
// for(var i=0;i<divs.length;i++){
// divs[i].className = 'item-[num]'
// }
var divs = document.querySelectorAll('.item')
console.log('divs', divs)
// 获取页面的屏幕的宽度，
function getClient () {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
// 获取页面的的滚动距离
function getScrollTop () {
return window.pageYOffset || document.documentElement.scrollTop
}
function bodyCenter (){
var bodyss = document.getElementById('box')
bodyss.style.margin = '0 auto'
}
window.onload = function () {
waterFall()
}
window.onresize = function () {
waterFall()
}
// 瀑布流函数
function waterFall () {
var gap = 10
// 获取每一个列的宽度（固定的宽度）
var itemWidth = document.querySelectorAll('.item')[0].offsetWidth
// 获取屏幕的宽度
var screenWidth = getClient().width
// 计算屏幕中能放下的列数
var colume = parseInt(screenWidth / (itemWidth + gap))
// 用来存放元素的高度
var arr = new Array()
var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
// 小于的话就都在第一行
if (i < colume) {
items[i].style.top = 0
items[i].style.left = (itemWidth + gap) * i + 'px'
arr.push(items[i].offsetHeight)
} else {
var minHeight = arr[0]
var index = 0
for (var j = 0; j < arr.length; j++) {
if(minHeight > arr[j]){
minHeight = arr[j]
index = j
}
}
items[i].style.top = arr[index] + gap + 'px'
items[i].style.left = items[index].offsetLeft + 'px';
//修改最小列的高度
//最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
arr[index] = arr[index] + items[i].offsetHeight + gap
}
}
}
</script>
</html>
