imagesLoaded（砌体）和 IE 不兼容答案

【问题标题】：imagesLoaded (Masonry) and IE incompatabilityimagesLoaded（砌体）和 IE 不兼容
【发布时间】：2014-08-19 03:17:06
【问题描述】：

我正在将 Masonry 用于项目并相应地应用 imagesLoaded。

经过多次测试后，我发现这两者几乎可以完美地协同工作，但有时它们会失败。 99% 的情况都是 imagesLoaded 的错。

但是，在 Internet Explorer 上，imageLoaded 加载失败的次数似乎比在任何其他浏览器中要多得多。

这是我发现的：

如果你打开一个新标签并直接输入 URL -> imagesLoaded 有效
如果您点击刷新 -> imagesLoaded 作品
如果输入 URL，点击刷新，在地址栏中标记文本并按 Enter -> imagesLoaded 失败
如果在控制台打开的情况下重复上述操作 -> imagesLoaded 作品
有时如果感觉像它，它就不起作用......

这里有什么问题？这只发生在 Internet Explorer（11、10、9 等）中。

这是 JS：

function masonryOptions(){
    $('.post-wrapper').width((((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%');
    $(window).resize(function() {
        $('.post-wrapper').width((((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%');
    });
    container.imagesLoaded(function(){
        $('iframe').load(function() {
            container.masonry({
                itemSelector: '.post-wrapper',
                gutter: gutter,
                transitionDuration: 0
            });
        });
    });
}
$(document).ready(function(){
    masonryOptions();
});

还有一个演示页面：http://lorem-blogsum.tumblr.com/

【问题讨论】：

标签： jquery internet-explorer masonry imagesloaded

【解决方案1】：

我在装订线和边距底部也有类似的问题；

我不知道究竟是什么问题，但就我而言，我的问题是填充。我尝试用砖石制作 2 列项目。

.item {
   padding: 10px 10px 10px 10px;
   margin-bottom: 10px;
   width: 48%;
}

.gutter {
   width: 4%;
 }

 <div id="id_list">
     <div class="item">
         ...
     </div>
     <div class="item">
         ...
     </div>
 </div>

 $("#id_list").masonry({
     gutter: ".gutter",
     itemSelector: "div.item"
 });

IE 有问题。所以，我改变了我的代码。

.item {
    margin-bottom: 10px;
    width: 48%;
}

.gutter {
    width: 4%;
}

<div id="id_list">
    <div style="padding: 10px 10px 10px 10px">
        <div class="item">
            ...
         </div>
         <div class="item">
            ...
         </div>
    </div>
</div>

$("#id_list").masonry({
    gutter: ".gutter",
    itemSelector: "div.item"
});

bug 消失了！我希望它对你有帮助，我很抱歉我的英语不好。

【讨论】：