效果是一個頁面很多圖片排列，寬度相同
效果實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美女瀑布</title>
<link rel="stylesheet" href="css/css_瀑布.css" />
<script type="text/javascript" src="js/js_瀑布.js">
</script>
</head>
<body>
<div class="bigbox">
<div class="box"><div class="img_box"><img src="img/1.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/2.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/3.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/4.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/5.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/6.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/7.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/8.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/9.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/10.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/11.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/12.jpg"/></div></div>
<div class="box"><div class="img_box"><img src="img/13.jpg"/></div></div>
</div>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
.bigbox{
position: relative;
}
.box{
padding: 5px;
float:left ;
}
.img_box{
padding: 5px;
margin-right: 20px;
border: 2px solid gainsboro;
border-radius: 5px;
box-shadow: 0 0 5px;
}
img{
width: 250px;
height: auto;
}
定量的圖片瀑布js代碼
window.οnlοad=function(){
yidong();
}
function getimgMinhidth(harry){
var min =Math.min.apply(null,harry);
var index = harry.indexOf(min);
return index
}
function getheight(){
var $box = document.getElementsByClassName('box');
var harry =[];
for(var i =0;i<8;i++){
harry[i]=$box[i].offsetHeight;
}
return harry
}
function yidong(){
var $img = document.getElementsByTagName('img');
var $box = document.getElementsByClassName('box');
var harry =getheight();
var $index = getimgMinhidth(harry);
for(var i =8;i<$img.length;i++){
$box[i].style.position='absolute';
$box[i].style.top=harry[$index]+'px';
$box[i].style.left=$box[$index].offsetLeft+'px';
$box[$index].style.height= harry[$index]+'px';
harry[$index] += $box[i].offsetHeight;
$index = getimgMinhidth(harry);
}
}可以滾動一直產出圖片的js代碼
window.οnlοad=function(){
yidong();
window.οnscrοll= function(){
if(checkflag()){
var $big =document.getElementsByClassName('bigbox')[0];
var imgdata =[];
for(var i =1;i<15;i++){
//隨機生成圖片的 src
var num = parseInt(Math.random()*12+1);
imgdata[i]="img/"+num+".jpg";
}
for(var j =1;j<15;j++){
//創建節點及插入
var $cbox = document.createElement("div");
$cbox.className='box';
$big.appendChild($cbox);
var $cimgbox =document.createElement("div");
$cimgbox.className='img_box';
$cbox.appendChild($cimgbox);
var $cimg =document.createElement("img");
$cimg.src=imgdata[j];
console.log($cimg.src)
$cimgbox.appendChild($cimg);
}
yidong();
}
}
}
function checkflag(){
//判斷滾輪是否滾到底部
var $big = document.getElementsByClassName('bigbox');
var $box = document.getElementsByClassName('box');
var lasttop = $box[$box.length-1].offsetTop;
//獲取最後一個圖片盒子的top值
var scroll = document.documentElement.scrollTop;
//獲取滾輪的top值
var pagetop = document.documentElement.clientHeight;
//獲取頁面已瀏覽過的top值
if(lasttop < (scroll + pagetop)){
return true
}
}
function getimgMinhidth(harry){
//獲取前排那個盒子的所在高度最低數組的下標
var min =Math.min.apply(null,harry);
var index = harry.indexOf(min);
return index
}
function getheight(){
//獲取前面8個盒子的所在高度數組
var $box = document.getElementsByClassName('box');
var harry =[];
for(var i =0;i<8;i++){
harry[i]=$box[i].offsetHeight;
}
return harry
}
function yidong(){
//進行後面盒子的移動
var $img = document.getElementsByTagName('img');
var $box = document.getElementsByClassName('box');
var harry =getheight();
var $index = getimgMinhidth(harry);
for(var i =8;i<$img.length;i++){
$box[i].style.position='absolute';
$box[i].style.top=harry[$index]+'px';
$box[i].style.left=$box[$index].offsetLeft+'px';
//通過定位移動盒子
harry[$index]+=$box[i].offsetHeight;
//移動完更新最低高度的盒子
$index = getimgMinhidth(harry);
//重新獲取前排那個盒子的所在高度最低數組的下標
}
}