css 方法
<!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>
</head>
<style>
*{
padding: 0;margin: 0;
background: #ddd;
}
.container{
max-width: 1200px;
margin: 100px auto;
}
ul{
list-style: none;
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap:1em;
max-width: 1200px;
margin:2em auto;
}
.list ul li{
padding: 10px;
margin-bottom: 10px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #fff;
box-shadow: 0 0 10px #ccc;
}
.list ul li img{
width: 100%;
}
</style>
<body>
<div class="container">
<div class="list"></div>
</div>
</body>
<script>
window.onload=function(){
let list = document.querySelector('.list');
let htmls=document.createElement('ul');
for(let i=0;i<nub;i++ ){
let n = Math.floor(Math.random()*8);
let li = document.createElement('li');
img = new Image();
img.src=`../image/${n+1}.jpg`;
li.append(img);
htmls.append(li);
};
list.append(htmls);
}
</script>
</html>
js 方法
<!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>
</head>
<style>
*{
padding: 0;margin: 0;
background: #ddd;
}
.container{
max-width: 1200px;
margin: 100px auto;
}
ul{
list-style: none;
position: relative;
}
.list ul li{
padding: 10px;
width: 23%;
margin-bottom: 10px;
background: #fff;
box-shadow: 0 0 10px #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transform: rotate(0deg) scale(0);
transition: all .3s ease-in-out;
}
.list ul li img{
width: 100%;
}
</style>
<body>
<div class="container">
<div class="list"></div>
</div>
</body>
<script>
window.onload=function(){
let list = document.querySelector('.list');
let row = 4,col=1,nub=20,htmls=document.createElement('ul');
for(let i=0;i<nub;i++ ){
let n = Math.floor(Math.random()*8);
let li = document.createElement('li');
img = new Image();
img.src=`../image/${n+1}.jpg`;
li.append(img);
htmls.append(li);
};
list.append(htmls);
setTimeout(()=>{
let newList = document.querySelectorAll('.list ul li');
newList.forEach((item,i)=>{
newList[i].style.left=(i%4)*(item.clientWidth+10)+'px';
newList[i].style.transform='rotate(360deg) scale(1)';
newList[i].style.opacity=1;
if(i>=4){
newList[i].style.top= newList[i-4].clientHeight+parseInt(newList[i-4].style.top)+10+'px';
}else{
newList[i].style.top=0;
}
})
},50)
}
</script>
</html>
