javascript - ajax 更新后 Jquery masonary 格式更改

Question

我正在使用 masonary jquery 插件来格式化通过 ajax 加载到我的页面中的图像。

除了通过 ajax 加载图像时，它们都运行良好，它们似乎不知从哪里获得了额外的边距/填充值，并且不像页面上已有的图像那样无缝贴合。我试过添加 margin:0; padding:0; 但似乎没有任何效果

我所有的代码目前都在这里: http://1hype.me/

非常感谢任何想法!

编辑:

问题出现在我测试过的所有东西上，Safari、Chrome 和 FF (mac)

这是一张截图，对其进行了更多解释:http://cl.ly/0d0q37290W1r0j0X2g0c

Answer 1

这是由于空格。

您可以只从 ajax 调用返回图像(没有任何脚本)

然后运行

function fetch() {
    //autoupdater
    $.ajax({
        type: "POST",
        url: "ajax/fetch_image.php",
        cache: false,
        data: "after=000000",
        success: function(results){ 
            var imgHolder = $('#image_holder');
            /* prepend the results 
             results is just the image (without whitespace around it) */
            imgHolder.prepend(results);
            /* fade in the first image (the one we just prepended)*/
            imgHolder.find('img:first').fadeIn(1100);
            /* do the masonry thing.. */
            imgHolder.masonry({ singleMode: true });
        }
    });
}

---

如果这不是一个选项(更改 fetch_image.php)，那么您可以使用

function fetch() {
    //autoupdater
    $.ajax({
        type: "POST",
        url: "ajax/fetch_image.php",
        cache: false,
        data: "after=000000",
        success: function(results){ 
            var imgHolder = $('#image_holder');
            /* exclude text whitespace nodes (not included in a tag).*/
                        var $results = $(results).filter(function(){return this.nodeType != 3});
            imgHolder.prepend( $results.eq(0) );
            $('body').append( $results.eq(1) );
        }
    });
}