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 的高度 设置成最大值 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 瀑布流布局ajax-瀑布流布局 实现思路 首先发送ajax请求获取数据,对获取到的数据采用瀑布流布局 当页面滚动到...
    放风筝的小小马阅读 517评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,082评论 19 139
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,212评论 2 19
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,594评论 1 19
  • 【摘抄】人生的难题若及时不解决,就会大山一样阻碍我们前进的路。 父母应该保持敏感,随时关注孩子的需要,投入爱,时间...
    一只打字的猫阅读 153评论 0 1