Home > Developer > Web Develop
Width is a certain height variable waterfall flow Layout can also be said to be seamless jigsaw puzzle when the browser scrolls to the bottom automatically load pictures loaded image address with JSON in Img.js, there is also loading animation is usedCSS3Produced in the FF and other support CSS3 can show you if you want to fully support the browser can be used in GIF animation code with a detailed explanation there is not much to say
? 1. [Code] Pre-load/waterfall stream
<!doctype html>
<meta charset= "Utf-8" >
<title> Fixed width Jquery+ajax+json waterfall flow layout (each line of code has a detailed comment) </title>
<style type= "Text/css" >
Body, UL, Li, h3 {margin:0; padding:0; list-style:none; font:bold 12px "Microsoft Jas Black";}
/* Waterfall Flow layout style */
#lxf-box {position:relative; width:1000px; margin:0 Auto;}
#lxf-box li {background: #fff; border:solid 1px #ccc; text-align:center; padding:10px; float:left;}
h3 {padding-top:8px;}
img {width:200px; height:auto; display:block; border:0}
/*CSS3 Animation Note Because it is CSS3 made, compatibility is not guaranteed to be compatible please make your own GIF animation loading diagram */
/*li {-webkit-transition:all. 7s ease-out. 1s;-moz-transition:all. 7s ease-out;-o-transition:all. 7s ease-out. 1s; t Ransition:all. 7s ease-out. 1s}*/
#loading {display:none; line-height:30px; background: #000; color: #fff; text-align:center; height:30px; width:100%; p osition:fixed; bottom:0; opacity:0.8;}
</style>
<script src= "Http://www.iiwnet.com/templets/niu/js/jquery.min.js" type= "Text/javascript" ></script>
<body>
<H1 color= "Red" > Preview no effect please refresh <ul id= "Lxf-box" >
<li><a href= "http://www.iiwnet.com/div_css/342.html" ></a>
</li>
<li><a href= "http://www.iiwnet.com/ajax/237.html" ></a>
</li>
<li><a href= "http://www.iiwnet.com/js_ad/271.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/js_texiao/312.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/js_pic/191.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/js_pic/318.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/div_css/341.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/div_css/350.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/div_css/350.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/div_css/349.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/php_base/336.html/" ></a>
</li>
<li><a href= "http://www.iiwnet.com/div_css/344.html/" ></a>
</li>
</ul>
<div id= "Loading" > Loading ......</div>
<script>
/*
Principle: 1. Put all the Li's height values into the array
2. The top of the first row is 0
3. Calculate the minimum value of the height value is which Li
4. Put the next Li under the Li.
<a href= "http://iiwnet.com/js_web/" > Web effects Code </a>:http://iiwnet.com
Write Time: June 9, 2012
*/
function Iiwnet () {//defined as functions for easy invocation
var wrap = document.getElementById ("Lxf-box")
var margin = 10;//Set spacing here
var li=$ ("Li");//This is the block name
Varli_w = li[0].offsetwidth+margin;//The actual width of the chunk (including spacing, which uses the source offsetwidth function, which does not apply to the width () function of jquery because it cannot get the actual width, For example, if there are pandding within the element)
var h=[];//an array of record block heights
Li.css ("position", "absolute");
var n = wrap.offsetwidth/li_w|0;//The width of the container divided by the chunk width is a row can put a few chunks
for (var i = 0;i < li.length;i++) {//number of Li loops how many times
Li_h = li[i].offsetheight;//Gets the height of each Li
if (I < n) {//n is the most one-line Li, so less than N is the first line.
h[i]=li_h;//put each Li in the array
Li.eq (i). CSS ("top", 0);//The top value of the first line of Li is 0
Li.eq (i). CSS ("left", I * li_w);//L-Li is the width of the I*li
}http://www.huiyi8.com/hunsha/hanshi/?
else{Korean wedding photos
Min_h =math.min.apply (null,h);//Get the smallest value in the array, the one with the smallest height value in the chunk
Minkey = Getarraykey (h, Min_h);//minimum value corresponding to the pointer
H[minkey] + = Li_h+margin;//Add new height after update height value
Li.eq (i). CSS ("top", min_h+margin);//Get the smallest Li first, then put the next Li under it
Li.eq (i). CSS ("left", Minkey * li_w);//L-Li is the width of the I*li
}
$ ("H3"). EQ (i). Text ("Number:" +i+ ", Height:" +li_h);//write The block number and its height value into the corresponding chunk H3 header
$ ("Li"). Animate ({opacity:1});
}
}
/* Returns the corresponding number of values in the array using the for-in operation (such as calculating the minimum height value is the first of the array) */
function Getarraykey (s, v) {for (k in s) {if (s[k] = = v) {return k;}}}
/* Be sure to use onload here, because the picture doesn't know the height value when it's not loaded */
Window.onload = function () {iiwnet ();};
/* Also run function when browser window changes */
Window.onresize = function () {iiwnet ();};
/**********************************************************************/
/* Infinite load */
var I=1;
function Getmore () {
$ ("#loading"). Show ();
var json = "Http://www.iiwnet.com/images/jstx/img.js";
$.getjson (JSON, function (data) {
$.each (Data,function (i) {
var Url=data[i].url;
var html= "<li style= ' opacity:0 ' ><a href= ' http://www.iiwnet.com/' ></a>< H3> picture title $ ("#lxf-box"). Append (HTML);
$ ("#loading"). Hide ();
});
Iiwnet ();
I=1
});
};
/* When scrolling to the bottom */
$ (window). Bind ("scroll", function () {
if (document). ScrollTop () + $ (window). Height () > $ (document). Height ()-&& i==1) {
i=0;
Getmore ();
}
});
</script>
</body>
?
Ajax+json+jquery implementing pre-load waterfall flow layouts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
