Jquery implements waterfall stream effect. jquery pulls down and loads new data. jquery pulls down

Jquery implements waterfall stream effect. jquery pulls down and loads new data. jquery pulls down

The waterfall stream effect is still available on many websites. It is still very good to see such a wrong layout. Today, I will record the code for implementing waterfall stream effects using jquery;

I. Basic page layout
1. The items box is mainly used to store the data items we need to place;
2. tips is the text used to prompt users when loading data on pages;

<Div class = "wrapper"> <div class = "items"> <div class = "item"> </div> <p class = "tips loading"> loading... </p> </div>

Ii. css style(Control the position of the prompt statement and the data display style)

Body {text-align: center; margin: 0; padding: 0; background-color: # F7F7F7; font-family: ' ';}. wrapper {padding: 50px;} img {display: block; width: 100%; height: 300px ;}. items {position: relative; padding-bottom: 10px ;}. item {width: 228px; position: absolute; border: 1px solid # ddd ;}. tips {width: 280px; height: 40px; margin: 30px auto 0; text-align: center; line-height: 40px; background-color: # CCC; border-radius: 6px; font-size: 16px; cursor: pointer; position: fixed; bottom: 0px; left: 50%; margin-left:-140px; opacity: 0; color: #666 ;}. tips. loading {/* background-color: transparent; */background-color: # dadada ;}

Iii. template reference (because the data display styles in this example are consistent, here I reference the template artTemplate)

1. Remember to introduce the js package of this template first;
2. The module defining the template must have an id and set the type;

 <script src="../js/template_native.js"></script> <script type="text/html" id="template">  <% for(var i = 0; i < items.length; i++){ %>   <div class='item'>        <p>     <%=items[i].text%>    </p>   </div>   <% } %> </script>

Iv. Effect of js on waterfall Stream Control

1. Here, I requested two php requests to return two simulated data;

$ (Function () {// the image that appears when the page is loaded. Click search image in the corresponding Baidu image $. ajax ({url :". /reset. php ", dataType:" json ", success: function (data) {var obj = {items: data}; var result = template (" template ", obj ); $ (". items "example .html (result); waterfall () ;}); // compile the waterfall stream jsfunction waterfall () {// calculate the display box width var totalWidth = $ (". items "). width (); // calculate the width of a single image (the width of each image is the same) var eachWidth = $ (". items. item "). width (); // calculate the number of images that can be arranged in a row var columNum = Math. floor (totalWidth/eachWidth); // set the remaining space to the margin var margin = (totalWidth-eachWidth * columNum)/(columNum + 1 ); // define an array to fill in the height value var heightArr = []; for (var I = 0; I <columNum; I ++) {heightArr [I] = 0 ;} // place the position at the minimum height var elementItems = $ (". items. item "); elementItems. each (function (idx, ele) {// obtain the minimum height of a row and Its index // define the initial minimum value and its index value var minIndex = 0; var minValue = heightArr [minIndex]; for (var I = 0; I 
5. the user-defined simulation data and php returned data are provided here.(Do not forget to enable the local server to obtain data in this way ~);
The following is the basic mode for returning data. To define multiple data entries, you only need to copy several objects;
[{"Path ":". /images/1.jpg", "text": "in middle school, two students in our class bet that the content is instant noodles in the toilet. Whoever eats the meal first wins, if you lose, please win a month's meal, so the two goods in the toilet are stunned to eat noodles on the pitfall. The two goods have not yet been determined to win, all the guys pulling shit spoke three times !!! "},{" Path ":"./images/2.jpg", "text": "Many relatives, usually called Marco, Niu, and other animal names. One time, someone knocked on the door. At that time, his son was still small. As soon as he opened the door, he said to his parents: Dad, Mom, donkey! "}...]
The following is the php code:
//reset.php<?php $jsonString = file_get_contents('info/reset.json'); $totalArr = json_decode($jsonString); echo json_encode($totalArr); ?>
// Index. php specifies that three pieces of data are returned at a time. <? Php $ jsonString = file_get_contents ('info/data. json '); $ totalArr = json_decode ($ jsonString); $ randomKeyArr = array_rand ($ totalArr, 3); $ templateArr = array (); for ($ I = 0; $ I <count ($ randomKeyArr); $ I ++) {$ currentKey = $ randomKeyArr [$ I]; $ currentObj = $ totalArr [$ currentKey]; $ templateArr [$ I] = $ currentObj;} echo json_encode ($ templateArr);?>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.