美文网首页
ajax瀑布流

ajax瀑布流

作者: 小小_超人 | 来源:发表于2017-11-03 17:37 被阅读0次

    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瀑布流

          本文链接:https://www.haomeiwen.com/subject/pkwtmxtx.html