Here is a way to use JS to achieve waterfall flow, look at criticism.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Waterfall Flow Layout test </title>
<style>
Body {
Background-color: #eee;
font-size:84%;
text-align:justify;
}
. column {
Display:inline-block;
Vertical-align:top;
}
. pic_a {
Display:block;
padding:5px;
margin-bottom:10px;
border:1px solid #ccc;
Background-color: #fff;
Text-decoration:none;
}
. pic_a img {
Display:block;
margin:0 Auto 5px;
border:0;
Vertical-align:bottom;
}
. pic_a Strong {
Color: #333;
}
</style>
<body>
<div id= "Container" ></div>
<script>
var waterfall = {
Container:document.getElementById ("container"),
Columnnumber:1,
columnwidth:210,
P_001.jpg ~ p_160.jpg
Rootimage: "test/",
indeximage:0,
ScrollTop:document.documentElement.scrollTop | | Document.body.scrollTop,
detectleft:0,
Loadfinish:false,
Returns a fixed-format picture name
Getindex:function () {
var index = this.indeximage;
if (Index < 10) {
index = "+" + index;
else if (Index < 100) {
index = "0" + index;
}
return index;
},
Whether to scroll load detection
Appenddetect:function () {
var start = 0;
for (start; start < This.columnnumber; start++) {
var elecolumn = document.getElementById ("Waterfallcolumn_" + start);
if (Elecolumn &&!this.loadfinish) {
if (Elecolumn.offsettop + elecolumn.clientheight < This.scrolltop + (Window.innerheight | | Document.documentElement.clientHeight)) {
This.append (Elecolumn);
}
}
}
return this;
},
Scroll load
Append:function (column) {
This.indeximage + 1;
var html = ', index = This.getindex (), Imgurl = This.rootimage + "P_" + index + ". jpg";
Picture size
var Aele = document.createelement ("a");
Aele.href = "###";
Aele.classname = "Pic_a";
aele.innerhtml = ' <strong> ' + index + ' </strong> ';
Column.appendchild (Aele);
if (index >= 160) {
Alert ("Picture loaded with light!") ");
This.loadfinish = true;
}
return this;
},
Page Load Initial creation
Create:function () {
This.columnnumber = Math.floor (document.body.clientwidth/this.columnwidth);
var start = 0, Htmlcolumn = ', self = this;
for (start; start < This.columnnumber; start+=1) {
Htmlcolumn = Htmlcolumn + ' <span id= ' waterfallcolumn_ ' + start + ' class= ' column ' style= ' width: ' + this.columnwidth + ' px ;" > ' +
function () {
var html = ', i = 0;
For (i=0 i<5; i+=1) {
Self.indeximage = start + Self.columnnumber * i;
var index = Self.getindex ();
html = html + ' <a href= ' ### ' class= ' pic_a ' ><strong> ' + index + ' </strong></a> ';
}
return HTML;
}() +
' </span> ';
}
Htmlcolumn + = ' <span id= ' waterfalldetect ' class= ' column ' style= ' width: ' + this.columnwidth + ' px; ></span> ';
This.container.innerHTML = Htmlcolumn;
This.detectleft = document.getElementById ("Waterfalldetect"). offsetleft;
return this;
},
Refresh:function () {
var arrhtml = [], arrtemp = [], Htmlall = ', start = 0, maxLength = 0;
for (start; start < This.columnnumber; start+=1) {
var arrcolumn = document.getElementById ("Waterfallcolumn_" + start). Innerhtml.match (/<a (?:. | \n|\r|\s) *?a>/gi);
if (arrcolumn) {
MaxLength = Math.max (MaxLength, arrcolumn.length);
Arrtemp is a two-dimensional array
Arrtemp.push (Arrcolumn);
}
}
reordering required
var lengthstart, Arrstart;
for (Lengthstart = 0; lengthstart<maxlength; lengthstart++) {
for (Arrstart = 0; arrstart<this.columnnumber; arrstart++) {
if (Arrtemp[arrstart][lengthstart]) {
Arrhtml.push (Arrtemp[arrstart][lengthstart]);
}
}
}
if (arrhtml && arrhtml.length!== 0) {
Number of new columns
This.columnnumber = Math.floor (document.body.clientwidth/this.columnwidth);
Calculate the number of rows per column
Rounding down
var line = Math.floor (Arrhtml.length/this.columnnumber);
Re-assemble HTML
var newstart = 0, Htmlcolumn = ', self = this;
for (Newstart; Newstart < This.columnnumber; newstart+=1) {
Htmlcolumn = Htmlcolumn + ' <span id= ' waterfallcolumn_ ' + Newstart + ' "class=" column "style=" width: ' + this.columnwidth + ' px; ' > ' +
function () {
var html = ', i = 0;
For (i=0 i<line; i+=1) {
HTML + + Arrhtml[newstart + self.columnnumber * i];
}
Whether to complement the remainder
HTML = html + (Arrhtml[newstart + self.columnnumber * Line] | | '');
return HTML;
}() +
' </span> ';
}
Htmlcolumn + = ' <span id= ' waterfalldetect ' class= ' column ' style= ' width: ' + this.columnwidth + ' px; ></span> ';
This.container.innerHTML = Htmlcolumn;
This.detectleft = document.getElementById ("Waterfalldetect"). offsetleft;
Detection
This.appenddetect ();
}
return this;
},
Scrolling load
Scroll:function () {
var self = this;
Window.onscroll = function () {
To improve performance, roll before and after the distance greater than 100 pixel processing
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
if (!this.loadfinish && math.abs (scrolltop-self.scrolltop) > 100) {
Self.scrolltop = scrolltop;
Self.appenddetect ();
}
};
return this;
},
browser window Size transform
Resize:function () {
var self = this;
Window.onresize = function () {
var eledetect = document.getElementById ("Waterfalldetect"), Detectleft = Eledetect && eledetect.offsetleft;
if (Detectleft && math.abs (detectleft-self.detectleft) > 50) {
Detect label offset exception, think layout to change
Self.refresh ();
}
};
return this;
},
Init:function () {
if (This.container) {
This.create (). Scroll (). resize ();
}
}
};
Waterfall.init ();
</script>
</body>