1

这是我从未使用过的浏览器上的常见问题，但似乎有些人仍然这样做。当我在网站上设置同位素网格时，它们似乎在每个浏览器中都可以正常工作，但是当我使用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并在窗口加载时启动淡入，如下所示：

(function($) {

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

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

})(jQuery);

为了给脚本更多的加载时间，这同样适用于所有浏览器，除了 IE。是否有任何方法可以启动在 IE 中也可以使用的砌体布局？

4

1 回答 1

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

于 2013-04-03T00:14:56.433 回答