js瀑布流特效
瀑布流预览
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#box{
position: relative;
}
.b_box{
float: left;
padding: 10px 0 0 10px;
}
.s_box{
border: solid 1px #ccc;
padding: 10px;
}
.b_box img{
vertical-align: bottom;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div class="b_box"><div class="s_box"><img src="img/1.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/2.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/3.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/4.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/5.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/6.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/7.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/8.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/9.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/10.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/11.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/12.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/13.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/14.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/15.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/16.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/17.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/18.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/19.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/20.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/21.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/22.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/23.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/24.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/26.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/25.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/27.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/28.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/29.jpg"/></div></div>
<div class="b_box"><div class="s_box"><img src="img/30.jpg"/></div></div>
</div>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box");
var b_boxs = document.getElementsByClassName("b_box");
var s_boxs = document.getElementsByClassName("s_box");
var imgs = document.getElementsByTagName("img");
var img = s_boxs[0].getElementsByTagName("img")[0];
//浏览器的宽度 document.body.offsetWidth
var clientWidth = document.body.offsetWidth;
//图片的宽度 img.img.offsetWidth
var imgWidth = img.offsetWidth;
//图片的高度 img.img.offsetHeight
var imgHeight = img.offsetHeight;
//b_box的宽度
var b_boxWidth = b_boxs[0].offsetWidth;
//b_box的高度
var b_boxHeight = b_boxs[0].offsetHeight;
//获取每行图片的个数
var num = parseInt(clientWidth/b_boxWidth);
//设置盒子居中
box.style.width = b_boxWidth*num + "px";
box.style.margin = " 0 auto";
// console.log(b_boxWidth);
// console.log(b_boxHeight);
console.log("列数:" + num);
var b_boxHeight = [];
for (var i = 0; i < b_boxs.length; i++) {
if(i<num){
b_boxHeight.push(b_boxs[i].offsetHeight);
}else{
var minHeight = getMinHeight(b_boxHeight);
var minHeightIndex = getMinHeightIndex(b_boxHeight,minHeight);
b_boxs[i].style.position = "absolute";
b_boxs[i].style.left = minHeightIndex*b_boxWidth + "px"
b_boxs[i].style.top = minHeight + "px"
b_boxHeight[minHeightIndex] += b_boxs[i].offsetHeight;
}
}
console.log(minHeight)
console.log(minHeightIndex)
console.log(b_boxHeight);
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function (){
// this.parentNode.style.border = "solid 1px red"
}
}
}
function getMinHeight(arr){
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
if(min>arr[i]){
min = arr[i];
}
}
return min;
}
function getMinHeightIndex(arr,minHeight){
var index;
for (var i = 0; i < arr.length; i++) {
if(minHeight == arr[i]){
index = i;
}
}
return index;
}
</script>
</body>
</html>
图片素材
| 1 | 2 | 3 |
|---|---|---|
 1.jpg
|
 2.jpg
|
 3.jpg
|
| 4 | 5 | 6 |
| :--: | :--: | :--: |
 4.jpg
|
 5.jpg
|
 6.jpg
|
| 7 | 8 | 9 |
| :--: | :--: | :--: |
 7.jpg
|
 8.jpg
|
 9.jpg
|
| 10 | 11 | 12 |
| :--: | :--: | :--: |
 10.jpg
|
 11.jpg
|
 12.jpg
|
| 13 | 14 | 15 |
| :--: | :--: | :--: |
 13.jpg
|
 14.jpg
|
 15.jpg
|
| 16 | 17 | 18 |
| :--: | :--: | :--: |
 16.jpg
|
 17.jpg
|
 18.jpg
|
| 19 | 20 | 21 |
| :--: | :--: | :--: |
 19.jpg
|
 20.jpg
|
 21.jpg
|
| 22 | 23 | 24 |
| :--: | :--: | :--: |
 22.jpg
|
 23.jpg
|
 24.jpg
|
| 25 | 26 | 27 |
| :--: | :--: | :--: |
 25.jpg
|
 26.jpg
|
 27.jpg
|
| 28 | 29 | 30 |
| :--: | :--: | :--: |
 28.jpg
|
 29.jpg
|
 30.jpg
|
