HTML Code:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "width=device-width,initial-scale=1" >
<title>Bootstrap</title>
<!--<link rel= "stylesheet" type= "Text/css" href= "Bootstrap.min.css" >-
<link rel= "stylesheet" type= "Text/css" href= "Foo.css" >
<script src= "Jquery-1.11.3.js" ></script>
<!--<script src= "Bootstrap.min.js" ></script>-
<!--<script src= "Myjquery.js" ></script>-
<script src= "Foo.js" ></script>
<body>
<div id= "Container" >
<div class= "box" >
<div class= "Content" >
<p>hello world</p>
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
<div class= "box" >
<div class= "Content" >
</div>
</div>
</div>
</body>
-------------------------
<div id= "Container" >
<div class= "box" >
<div class= "Content" >
<p>hello world</p>
</div>
</div>
</div>
Css:
*{
padding:0;
margin:0;
}
. box{
position:relative;
Float:left;
}
. content{
margin:10px;
padding:0px;
border:1px solid #ccc;
box-shadow:0 0 5px #ccc;
border-radius:5px;
}
. Content img{
width:359px;
Height:auto;
}
Js:
$ (document). Ready (function () {
$ (window). On ("Load", function () {
Imglocation ();
});
});
function Imglocation () {
var box = $ (". box");
var boxwidth = box.eq (0). width ();
var num = Math.floor ($ (window). Width ()/boxwidth);
var boxarr = [];
Box.each (function (index,value) {
var boxheight = box.eq (index). Height ();
if (index<num) {
Boxarr[index] = boxheight;
}else{
var minboxheight = Math.min.apply (Null,boxarr);
var minboxindex = $.inarray (Minboxheight,boxarr);
$ (value). css ({
"Position": "Absolute",
"Top": minboxheight,
"Left": Box.eq (Minboxindex). Position (). left//; Not
});
Boxarr[minboxindex] + = BOX.EQ (index). Height ();
}
});
}
function (index,value) index and value is array
Console.log (index+ "--" +value);
Console.log (Boxheight);
Console.log (Minboxheight);
Console.log (Minboxindex);
Console.log (value);
jquery for waterfall Flow