在我之前写的那个的瀑布流布局的基础上添加了AJAX功能,数据保存在JSON文件里面,可以把容器定宽也可以设置100%,动画效果使用CSS3,如果不喜欢删除即可。
这个是定宽的效果:http://www.liuxiaofan.com/demo/jajxwaterfall.html
这个是全屏效果的:http://www.liuxiaofan.com/demo/jajxwaterfall2.html
其实区别仅仅是修改了容器的宽度而已,一个是1000px另一个是100%
具体代码查看源文件吧,注释得很清楚了。

转载请注明来自:爱前端

22 thoughts on “jQuery+AJAX+JSON无限瀑布流

    • 图片是我估计删掉的,因为我的博客空间有流量限制,图片太大了,经常把流量耗尽。你要看效果就把图片链接换成自己的就好了。

  1. 您好,您写的这个瀑布流很好,我用的是定宽不定高的,可是我修改一下放在我的网站上都乱套了是怎么回事?这个问题我都纠结好几天了,如果您能回复我非常感谢,帮帮忙。

  2. 感谢您的分享,我是asp.net开发。
    使用这个代码时,我修改数据来源方式
    改为向ashx文件发送参数来获取数据
    在ashx文件查询出数据后,直接拼接好Html代码返回给js接收在返回页面显示,使用的是分页方法
    每次进入ashx取得数据后会对当前页数加一,并会赋到拼接好的html代码末尾一起返回给js,然后js判断接收下次的页数
    。但是不知道什么回事,每次滚动到指定高度加载新的数据时,老是出现重复数据。比如我每页指定显示4个,结果出来8个,后4个顺序不一,但内容一样,请问这是什么原因?
    难道每次滚动会触发两次js?

    • 我这里写的肯定是一次的不然也是双倍结果了不是吗?不知道你具体是怎么弄的,还是仔细调试一下看看为什么触发2次事件吧。

  3. 很感谢你的分享,看了收获颇多,我是一个新手,只是我有一个疑问:为什么我把你的 jQuery+AJAX+JSON无限瀑布流 瀑布流代码 放到我的LINUX服务器上 IE8、火狐就不支持无限加载了呢??

  4. ^_^,看到你写的,还是觉得自己写的很好。应用中应该是图片的高度直接从给到数据中获取到,没有时间等img的onload。

  5. /*无限加载*/
    var i=1;
    function getMore(){
    $(“#loading”).show();
    var json = “img.js”;
    $.getJSON(json, function(data){
    $.each(data,function(i){
    var url=data[i].url;
    var html=”图片标题”;
    $(“#lxf-box”).append(html);
    $(“#loading”).hide();
    });
    liuxiaofan();
    i=1
    });
    };

    /*怎么修改为 不是无限加载*/

    • 搜索一下ajax分页吧,其实瀑布流就是个分页功能而已,这里一句两句还说不清楚,其实我一开始做的就不是无限的,稍后我会写个ajax分页功能。

    • 不可以,一定要先onload才能知道图片的高度,其实图片的高度可以通过Php等后台程序先算出来然后生产json文件,我们再调用,这个demo只是把原理展示出来而已。

  6. 你好, 想问个问题, 你的demo 用了重复的图片, 如果是新的图片呢? 有没有可能, 图片还没加载完, 这时候计算出来的高度是错误的?
    因为当图片加载完成后,会吧高度撑高,对于这个情况,lz怎么处理的呢?(必须事先获取宽高吗?)

发表评论

电子邮件地址不会被公开。 必填项已用*标注