<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Floating Waterfall Flow (case: Mushroom Street) .html</title>
<style>
*{margin:0;padding:0;}
Ul,li{list-style:none}
#div1 {width:695px;margin:20px auto;border:1px solid #ccc; overflow:auto;}
ul{width:225px;height:auto;float:left;margin-left:5px;}
</style>
<script src= "Jquery-1.7.2.min.js" ></script>
<script>
var data={//simulates the data returned by Ajax
code:0,
List: [
{src:[' img/1.jpg ', ' img/2.jpg ', ' img/3.jpg '],title:[' 222222222 ', ' 222222222 ', ' 222222222 ']},
{src:[' img/4.jpg ', ' img/5.jpg ', ' img/6.jpg '],title:[' 222222222 ', ' 222222222 ', ' 222222222 ']},
{src:[' img/7.jpg ', ' img/8.jpg ', ' img/9.jpg '],title:[' 222222222 ', ' 222222222 ', ' 222222222 '}
]
};
$ (window). Scroll (function () {////When the scroll time is triggered, the last li of each UL, when it enters the viewable area, sends an AJAX event to get the following data.
var bbtn=true; Build a switch
For (Var i=0;i<$ ("ul". length); i++) {//Cycle each UL
var lastli=$ ("ul") [I].find ("Li"). Last (); Find each UL inside the last Li
var litop=lastli.offset (). Top; Get the distance from each Li to the top of a document
var aa=$ (window). Height () +$ (window). scrolltop (); Get the Visual Area window height + scroll bar scrolling distance
if (LITOP<AA&&BBTN) {//If the LI is less than AA from the top of the document, that is, the Li enters the visual window and sends an AJAX event
bbtn=false;//just came in as false.
/*var Jqxhr=$.ajax ({//analog AJAX request data
Type: "Get",
URL: "",
data:{},
DataType: "JSON",
}
Jqxhr.done (function (data) {
});*/
if (Data.code) {//Send a second request if there is content
Bbtn=true;
}
for (var i in data) {//actually this should be written in the Done function
var list=data.list[i];
var htm= "";
for (var j in list) {
var src=list.src[j];
var title=list.title[j];
htl+= "<li><p>" +title+ "</p></li>";
}
$ ("ul[i]"). Append (HTM);
}
}
}
});
</script>
<body>
<div id= "Div1" >
<ul>
<li>
<p>1111111</p>
</li>
<li>
<p>2222222</p>
</li>
<li>
<p>3333333</p>
</li>
</ul>
<ul>
<li>
<p>1111111</p>
</li>
<li>
<p>2222222</p>
</li>
<li>
<p>3333333</p>
</li>
<li>
<p>3333333</p>
</li>
</ul>
<ul>
<li>
<p>1111111</p>
</li>
<li>
<p>2222222</p>
</li>
<li>
<p>3333333</p>
</li>
</ul>
</div>
</body>
Floating Waterfall Flow (case: Mushroom Street)
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
