Data dynamic loading __json of picture waterfall flow layout based on JSON fetching data

Some time ago, do a site to use the picture Waterfall flow layout. I was on the internet to find a imitation petal net waterfall stream source code, but its data is called static page, complex, poor reusability. I thought about implementing data invocation via JSON.

First the effect presented: http://www.i5wl.com/example/waterfall/

The directory structure is as follows:

Waterfall
-->css
   -->style.css
-->js
   -->jquery-1.9.1.js
   --> Jquery.infinitescroll.min.js
   -->jquery.masonry.min.js
-->img
   -->1.jpg, 2.jpg, 3.jpg---8.jpg
-->index.html
-->json.txt

First Analysis Home (index.html):

is mainly the parameter setting of the Infinitescroll function.

The datatype parameter is set to "JSON", which accepts data in JSON format as follows:

DataType: ' JSON ',

Template parameter that passes data from JSON back to the callback function, which returns a string that needs to be converted into the HTML format of the waterfall stream block using the data js. As follows:

Template:function (data) {
  var more = ';
  for (i = 0; i < data.pic.length. i++) {More
    = more + ' <div class= ' pin WFC wft ' ><a class= ' img x ' href= '/pins /60411519/"target=" _self "><s Pan style= "Display:none" class= "Stop" ></span></a><p class= "description" >11111</p></ Div> ';
  }
  return to more;
},

The HTML format of the waterfall stream block can be compared with the template parameter, as follows:

<div class= "pin WFC wft" >
  <a class= "img x" href= "/pins/60411519/" target= "_self" ><span" style= "Display:none" class= "Stop" ></span></a>
  <p class= "description" >11111</p>
</div>

Itemselector parameter, whose content is the class in the waterfall flow block above. WFC.

Nextselector parameter, set the link selector to be loaded for the waterfall flow, as follows:

Nextselector: "#navigation a",

Its corresponding "#navigation a" block is located at the tail end of index.html, as follows:

<div id= "navigation" ><a href= "json.txt?page=1" ></a></div>

The "json.txt" in the link is our JSON data source, and the Cascade stream calls this JSON data.

Next Analysis Json.txt:

In the JSON source, each set of data has a URL and a height item, which is the address and altitude of the picture in the waterfall stream, and in the template argument described above, the invocation is in the form of: Data.pic.url and Data.pic.height.

{"
  pic": [
  {
    "url": "Img/1.jpg",
    "height":]
  ,
  {
    "url": "Img/2.jpg",
    "height" : 144
  },
  {
    "url": "Img/3.jpg", "height": "The", ""
    url ":" Img/4.jpg ",
    " Height ": 309
  },
  {
    " url ":" Img/5.jpg ",
    " height ": 289
  },
  {
    " url ":" Img/6.jpg ",
    "height": 287
  },
  {
    "url": "Img/7.jpg",
    "height": 975
  }
  ]
}

In this case, a simple JSON data call has been implemented. Next, I will study how to use the database to invoke the data to implement the waterfall flow layout data dynamic loading.