ajax瀑布流

1整体思路

1.1准备文件目录

1.1.1 water.html  water.php  images  js json文件

1.2 思路 

浏览器端：    由water.html 创建点击事件，发送ajax请求，利用了jQuery插件， ajax({

    url:'',type:'',dataType:'json/jsonp',success:function(data){

}

---

服务器端： 1.接受数据，用file_get_contents();方法读取json文件，

2.把读取的数据用json_decode();方法转换成数组对象

3用array_rand(array,num);方法随机选取num个数组

4遍历 把这num个数组包装到一个新的数组当中去

5用json_encode方法处理这些东西 最后echo到浏览器端

---

再处理浏览器端

运用到自定义模板 和 模板引擎

生成 n个item小模块

添加到富集元素中 

---

重点写瀑布流的jquery插件

步骤一

$-this代替this

用jQuery写父元素的 宽度  一行有几个元素   每个子级元素宽度 间隔大小

步骤二

用数组记录每一列的最小高度

给每一列的最小高度赋值

找出最小高度的元素的 索引值 和 最小高度值

对该元素对象设置 top 和left 值

并且最小高度加上当前元素的高度

步骤三

找到数组中值最大的那个  

$_this 的高度 设置成最大值