jquery Implementation Waterfall Streaming effect jquery drop load new data _javascript tips

Waterfall flow effect in many sites or some, this patchwork arrangement looks very good. Today I'm going to take a look at the code that uses jquery to achieve the waterfall flow effect;

First, the basic layout of the page
1. The items box is mainly used for storing the data item we need to display;
2. Tips is the text used to prompt the user when the page loads data;

 <div class= "wrapper" >
  <div class= "items" >
   <div class= "item" ></div>
  </div >
  <p class= "Tips loading" > Loading ...</p>
 </div>

second, CSS style (Control the position of the prompt statement, as well as the style of the data display)

body {
  text-align:center;
  margin:0;
  padding:0;
  Background-color: #F7F7F7;
  font-family: ' Microsoft Ya-black '
;

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;
}

Third, the template version of the reference (as this example in the data display style are consistent, here I quote template arttemplate) off

1. Remember to first introduce this template version of the JS package;
2. The module to define the template to have an ID, there are settings 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 ' >
     ' alt= ' ">
    <p>
     <%=items[i].text%>
    </p>
   </div>
   <%}%>
 </script>

Four, JS control the effect of waterfall flow

1. Here, I requested two PHP to return two analog data respectively;

$ (function () {//page load on the picture, corresponding to the actual Baidu image click Search picture $.ajax ({url: "./reset.php", DataType: "JSON", Success:function (Dat
   a) {var obj = {Items:data};
   var result = Template ("template", obj);
   $ (". Items"). HTML (result);
  Waterfall ();
}
 });

});
 Write Waterfall Flow JS function waterfall () {//Calculate display box width var totalwidth = $ (". Items"). Width ();
 Calculates the width of a single picture (the width of each picture is consistent) var Eachwidth = $ (". Items. Item"). width ();
 Calculate a line can arrange a few pictures var columnum = Math.floor (totalwidth/eachwidth);
 Set the remaining space to the outer margin var margin = (Totalwidth-eachwidth * columnum)/(Columnum + 1);
 Defines an array to fill the height value var heightarr = [];
 for (var i = 0; i < Columnum i++) {heightarr[i] = 0;
 }//Placing position at minimum height var elementitems = $ (". Items. Item");
  Elementitems.each (function (idx, ele) {//Get the minimum height of a row and its index///definition initial minimum value and its index value var minindex = 0;
  var minvalue = Heightarr[minindex];
    for (var i = 0; i < heightarr.length i++) {if (Heightarr[i] < MinValue) {minindex = i; MinValue = Heightarr[i]; 

  } $ (ele). CSS ({//Note point: Here is the index of the minimum value IDX Left:margin + (margin + eachwidth) * Minindex, top:minvalue});
  Recalculate height, update height array var oldheight = Heightarr[minindex];
  OldHeight + = $ (ele). Height () + margin;
 Heightarr[minindex] = OldHeight;

 });

return Heightarr;
  } $ (window). On ("Scroll", function () {if (Tobottom ()) {$ (". Tips"). CSS ("opacity", 1);
    $.ajax ({url: "./index.php", DataType: "JSON", success:function (data) {var DataItem = {Items:data
    };
    var res = template ("template", DataItem);
    $ (". Items"). Append (res);
    Waterfall ();
   $ (". Tips"). CSS ("opacity", 0);
 }
  });

}
});
 Determine if the function Tobottom () {var scrolltop = $ (window) is already at the bottom. scrolltop ();
 var clientheight = $ (window). Height ();
 var offsettop = $ (". Items. Item:last-child"). Offset (). Top;
 Console.log (scrolltop + "..." + clientheight + "..." + offsettop);
 if (scrolltop + clientheight > offsettop) {return true;
 else {return false;

 }
}

Five, finally here is the custom simulation data, as well as a simple PHP return Data (don't forget to use this way to get data, you need to open the local server Oh ~);

The following is the basic mode of returning data, if you want to define more than one piece of data, as long as you copy several objects;

[
 {
  "path": "./images/1.jpg",
  "text": "In high school, our class two students bet, the content is in the toilet to eat instant noodles, who first eat who won, lost, please win the eat one months of rice, so the toilet was discovered two A cargo squat pit to eat bubble noodles, these two goods have not yet decided, next to take the excrement of the brothers spit three back to the!!! "
 },
 {
  " path ":"./images/2.jpg ",
  " text ":" Relatives have many good brothers, usually jokingly called Marco, Niu elder brother, and so on animal name. " Once, someone knocked at the door, when his son was still small, opened the door, to his parents said: Dad, mom, Donkey came! "
 }
 ...
]

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 here specify a return of three data
<?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 the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.