V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
justfindu
V2EX  ›  JavaScript

使用Masonry来做瀑布流加载, 但是在ajax中不能够完成,求方法.希望能够ajax中也能够使用imagesloaded来实现加载图片完成之后进行排列.

  •  
  •   justfindu · 2013-08-23 16:23:02 +08:00 · 7730 次点击
    这是一个创建于 4139 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我的代码
    不会贴git代码 直接贴了

    html:

    <div class="container" id="wall">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    ...
    </div>

    js:
    var container = jQuery('#wall');
    jQuery("#wall item").imagesLoaded(function(){
    container.masonry({
    gutter: 28,
    itemSelector: '.item',
    isAnimated: true
    });
    });

    ajax:

    jQuery.getJSON('http://localhost/test.json',function(data){
    var tmp;
    var l = data.length;
    var h = '';
    for(var i=0;i<l;i++){
    tmp =data[i];
    h += '<div class="item"><h5>'+tmp.title+'</h5><img src="'+tmp.image+'" alt=""></div>';
    }
    jQuery(h).imagesLoaded(function(){
    jQuery('#wall').append(jQuery(h)).masonry('appended', jQuery(h), true);
    });
    })


    在第一步加载js的时候是没有问题的,

    关键是触发ajax之后添加到后面的DOM就不会再瀑布流式的排列了.

    还有如果ajax改成如下

    jQuery.getJSON('http://localhost/test.json',function(data){
    var tmp;
    var l = data.length;
    var h = '';
    for(var i=0;i<l;i++){
    tmp =data[i];
    h = '<div class="item"><h5>'+tmp.title+'</h5><img src="'+tmp.image+'" alt=""></div>';
    jQuery(h).imagesLoaded(function(){
    jQuery('#wall').append(h).masonry('appended', jQuery(h), true);
    });
    }
    });

    这样的情况就是只会增加最后一个DOM, 而且前面的会空出来.

    求指教.

    尝试过 其他 masonry的reloaditems , 这个效果就是把新增加DOM的坐标全部清空.
    6 条回复    1970-01-01 08:00:00 +08:00
    justfindu
        1
    justfindu  
    OP
       2013-08-23 16:29:41 +08:00
    是因为不贴git 所以没人看么- -
    dexbol
        2
    dexbol  
       2013-08-23 17:57:59 +08:00   ❤️ 1
    @justfindu 应该是。
    Gawie
        3
    Gawie  
       2013-08-23 18:07:52 +08:00   ❤️ 1
    没有配合infinitescroll 么
    justfindu
        4
    justfindu  
    OP
       2013-08-26 08:47:25 +08:00
    @Gawie 没尝试~ 我看过示例~ 我是绑定按钮~ 跟Masonry示例上的~ 我去搞搞
    ghbjy1128
        5
    ghbjy1128  
       2013-08-26 10:20:37 +08:00
    如果没有不需要考虑IE8的话,使用naturalHeight and naturalWidth最方便
    justfindu
        6
    justfindu  
    OP
       2013-08-26 12:32:10 +08:00
    @ghbjy1128 要是不考虑IE的话 这件事就变成简单多了~ 可是~ 哎~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5799 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 03:32 · PVG 11:32 · LAX 19:32 · JFK 22:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.