Question

这是我从不使用的浏览器的常见问题，但似乎仍有一些问题。当我在网站上设置同位素网格时，它们似乎在每个浏览器中都能正常工作，但是当我使用http://netrenderer.com在IE中进行测试时，它无法布局div而是将它们全部卡在左边的浏览器。我正在尝试找到一个jQuery方法来启动同位素/砌体布局等跨浏览器友好（尤其是IE）。
这是jsfiddle中的一个简单模型：http://jsfiddle.net/73Xv7/3/
和现场演示版本：http://jsfiddle.net/73Xv7/3/show/
jQuery的：

var jQuerycontainer = jQuery('#main-grid');

jQuerycontainer.imagesLoaded( function(){
jQuerycontainer.isotope({
    itemSelector: '.grid-block',
    animationEngine: 'best-available',
    masonry: {
    columnWidth: 4
    }
});
    });

我试过的其他东西是将主体设置为display: none并在窗口加载时启动fadeIn，如下所示：

(function($) {

  $(window).load(function() {
    $(document.body).fadeIn(1000);
  });

  setTimeout(function() {
      $('#main-grid').isotope( 'reLayout' );
}, 1000);

})(jQuery);

为了让脚本有更多的时间加载，再次这适用于所有浏览器，禁止IE。是否有任何方法可以启动在IE中工作的砌体布局？

Answer 1

我在IE8和IE9中尝试过你的jsfiddle，它正在运行。我认为netrenderer.com引擎可能存在问题。

您是否考虑过使用布局回调函数来触发fadeIn？

$('#container').isotope({
  onLayout: function( $elems, instance ) {
    // `this` refers to jQuery object of the container element
    console.log( this.height() );
    // callback provides jQuery object of laid-out item elements
    $elems.css({ background: 'blue' });
    // instance is the Isotope instance
    console.log( instance.$filteredAtoms.length );
  }
});

请参阅：http://isotope.metafizzy.co/docs/options.html

jQuery同位素：IE无法加载

1 个答案: