前段时间,做一个网站要用到图片的瀑布流布局。自己当时在网上找了一个仿花瓣网的瀑布流源码,不过它的数据是调用静态页面,繁杂,重用性差。我寻思着实现通过JSON调用数据。
目录结构如下:
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
先分析首页(index.html):
主要是infinitescroll函数的参数设置。
dataType参数设为“json”,即接受JSON格式的数据,如下:
dataType: 'json',
template参数,将从JSON传回的数据data传递给回调函数,回调函数要返回一个字符串,此字符串需要把data利用JS转换成瀑布流块的HTML格式。如下:
template: function(data) {
var more = '';
for(i = 0; i < data.pic.length; i++){
more = more + '<div class="pin wfc wft">