<!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 () {
// Get all images
var img_list = $ ( "box_img. " );
// Get the width of the image
var IMG_WIDTH img_list.outerWidth = ();
the console.log (IMG_WIDTH);
width of the screen //
var ScreenWidth = $ (window) .width ();
// number of columns
var img_li_count = parseInt ( ScreenWidth / IMG_WIDTH);
// Create a memory array to a value not listed
var heightarr = [];
$ .each (img_list, function (index, Item) {
height // each image
var imgheight = $ (item). outerHeight ();
// determines whether the first column
iF (index <img_li_count) {
heightarr [index] = imgheight;
$ (Item) .css ({
position: 'Absolute',
left: (IMG_WIDTH index *) + 'PX',
Top: "0px",
})
} the else {
// minimum column height
var = MIN_HEIGHT Math.min.apply (null, heightarr);
Console .log ( "minimum height" + MIN_HEIGHT);
// index minimum height
var minHeight_index = $ inArray (MIN_HEIGHT, heightarr);.
the console.log ( "minimum height index" + 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>
Waterfall write js
Guess you like
Origin www.cnblogs.com/bing777/p/11627722.html
Recommended
Ranking