<div id= "Container" >
<div class= "box" >
<div class= "Content" >
</div>
</div>
$ (document). Ready (function () {
$ (window). On ("Load", function () {
Imglocation ();
var dataimg={"Data": [{"SCR": "Test0.jpg"},{"SCR": "Test1.jpg"},{"SCR": "Test2.jpg"},{"SCR": "Test3.jpg"},{"SCR": " Test4.jpg "},{" SCR ":" Test5.jpg "},
{"SCR": "Test6.jpg"},{"SCR": "Test7.jpg"},{"SCR": "Test0.jpg"},{"SCR": "Test1.jpg"},{"SCR": "Test2.jpg"},{"SCR": " Test3.jpg "},{" SCR ":" Test4.jpg "}]};
Window.onscroll = function () {
if (Scrollside ())
{
Console.log ("World wolrd wolrd")
$.each (Dataimg.data,function (index,value) {
var box = $ ("<div>"). addclass ("box"). AppendTo ($ ("#container"));
var content = $ ("<div>"). AddClass ("Content"). AppendTo (box);
Console.log ("url" + "./images/" +$ (value). attr ("SCR"));
var img = $ ("});
Imglocation ();
}
}
});
});
function Scrollside () {
var box = $ (". box");
var box2= box.last ();
var lastboxheight = Box.last (). Get (0). Offsettop+math.floor (Box.last (). Height ()/2);
var documentheight = $ (document). width ();
var scrollheight = $ (window). scrolltop ();
Return (lastboxheight<documentheight+scrollheight)? True:false;
}
function Imglocation () {
var box = $ (". box");
Console.log ("box" +box.length);
var boxwidth = box.eq (0). width ();
var num = Math.floor ($ (window). Width ()/boxwidth);
var boxarr = [];
Box.each (function (index,value) {
var boxhegiht = box.eq (index). Height ();
if (index<num)
{
Boxarr[index] = boxhegiht;
}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
});
Boxarr[minboxindex] +=box.eq (index). Height ();
}
});
}
jquery Waterfall Stream