<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<script type="text/javascript" src="jquery.js" ></script>
<style style="text/css">
.box{
width: 100%;
padding: 20px;
}
.box_img{
width:300px;
border:solid 10px white;
}
</style>
</head>
<body>
<div class="box">
<img class="box_img" src="img/1.jpg"/>
<img class="box_img" src="img/2.jpg"/>
<img class="box_img" src="img/3.jpg"/>
<img class="box_img" src="img/4.jpg"/>
<img class="box_img" src="img/5.jpg"/>
<img class="box_img" src="img/6.jpg"/>
<img class="box_img" src="img/7.jpg"/>
<img class="box_img" src="img/8.jpg"/>
<img class="box_img" src="img/9.jpg"/>
<img class="box_img" src="img/10.jpg"/>
<img class="box_img" src="img/11.jpg"/>
<img class="box_img" src="img/12.jpg"/>
<img class="box_img" src="img/13.jpg"/>
<img class="box_img" src="img/14.jpg"/>
<img class="box_img" src="img/15.jpg"/>
<img class="box_img" src="img/16.jpg"/>
<img class="box_img" src="img/17.jpg"/>
<img class="box_img" src="img/18.jpg"/>
<img class="box_img" src="img/19.jpg"/>
<img class="box_img" src="img/20.jpg"/>
<img class="box_img" src="img/21.jpg"/>
<img class="box_img" src="img/22.jpg"/>
<img class="box_img" src="img/23.jpg"/>
<img class="box_img" src="img/24.jpg"/>
<img class="box_img" src="img/25.jpg"/>
<img class="box_img" src="img/26.jpg"/>
<img class="box_img" src="img/27.jpg"/>
<img class="box_img" src="img/28.jpg"/>
<img class="box_img" src="img/29.jpg"/>
<img class="box_img" src="img/30.jpg"/>
<img class="box_img" src="img/31.jpg"/>
<img class="box_img" src="img/32.jpg"/>
<img class="box_img" src="img/33.jpg"/>
<img class="box_img" src="img/34.jpg"/>
<img class="box_img" src="img/35.jpg"/>
<img class="box_img" src="img/36.jpg"/>
<img class="box_img" src="img/37.jpg"/>
<img class="box_img" src="img/38.jpg"/>
</div>
</body>
<script type="text/javascript">
$(function(){
val_innstall();
})
function val_innstall(){
//获取所有的图片
var img_list=$(".box_img");
//获取图片的宽度
var img_width=img_list.outerWidth();
console.log(img_width);
//屏幕的宽度
var screenwidth=$(window).width();
//列数
var img_li_count=parseInt(screenwidth/img_width);
//创建一个数组来存没列的值
var heightarr=[];
$.each(img_list, function(index,item) {
//每个图片的高度
var imgheight=$(item).outerHeight();
//判断是否第一列
if(index<img_li_count){
heightarr[index]=imgheight;
$(item).css({
position:'absolute',
left:(index*img_width)+'px',
top:"0px",
})
}else{
//列最小的高度
var min_height=Math.min.apply(null,heightarr);
console.log("最小的高度为"+min_height);
//最小高度的索引
var minHeight_index=$.inArray(min_height,heightarr);
console.log("最小的高度的索引为"+minHeight_index);
$(item).css({
position:'absolute',
left:(minHeight_index*img_width)+'px',
top:min_height+"px",
})
heightarr[minHeight_index]=(min_height+$(item).outerHeight());
}
});
}
</script>
</html>
瀑布流 js编写
猜你喜欢
转载自www.cnblogs.com/bing777/p/11627722.html
今日推荐
周排行