0

我正在研究一个 jQuery Isotope 实现，但只有在笔记本电脑和移动设备上调整浏览器大小后，动画才会“唤醒”。也许我的订单是错误的？这是我正在处理的网站：

http://rgbdrinks.squarespace.com/

如果您能够弄清楚为什么移动实施不是很好，那也很棒，但我意识到这可能是一个很难进入的世界。

非常感谢您提前提供的帮助，

安德鲁

这是代码：

<div id="container">

<div class="item"><div id="squarespace-slideshow-wrapper-1371031439" rel="51b847e2e4b0552c3a104be5" class="ss-slideshow-v2"></div><p>This is a test</p></div>
<div class="item"><img style="width: 150px;" src="/picture/drink%20pour%203.jpg?pictureId=18133348&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962041640" alt="" /></div>
<div class="item"><img style="width: 150px;" src="/picture/martini%20glass%20splash.jpg?pictureId=18133349&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962058097" alt="" /></div>
<div class="item"><img style="width: 150px;" src="/picture/tablecloth.jpg?pictureId=18133350&amp;asGalleryImage=true&amp;__SQUARESPACE_CACHEVERSION=1370962092184" alt="" /></div>
<div class="item"><div id="squarespace-slideshow-wrapper-1370943850" rel="51b6f18ae4b0877f36bb6468" class="ss-slideshow-v2"></div></div>
<div class="item"><div id="squarespace-slideshow-wrapper-1371031528" rel="51b84800e4b0552c3a104be6" class="ss-slideshow-v2"></div></div>
<div class="item"><div id="squarespace-slideshow-wrapper-1371031555" rel="51b8481be4b0552c3a104be7" class="ss-slideshow-v2"></div></div>
<div class="item"><div id="squarespace-slideshow-wrapper-1371031585" rel="51b8483ee4b0552c3a104be8" class="ss-slideshow-v2"></div></div>

</div>


<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/jquery-1.7.1.min.js"></script>
<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/jquery.isotope.min.js"></script>
<script src="http://rgbdrinks.squarespace.com/storage/isotope/js/fake-element.js"></script>


<script>

var $container = $('#container')

// initialize Isotope

$container.isotope({

  // options...

  resizable: false,
  itemSelector : '.item',
  animationEngine : 'best-available',

  // set columnWidth to a percentage of container width

  masonry: { columnWidth: $container.width() / 5 }

});

  // update columnWidth on window resize

  $(window).smartresize(function(){
    $container.isotope({

    // update columnWidth to a percentage of container width

    masonry: { columnWidth: $container.width() / 6 }

  });
});

</script>
4

2 回答 2

0

我只是看了一下安德鲁的网站，发现他已经通过调用解决了这个问题

jQuery(window).load(
    function()
    { jQuery
        ('#blog-wrap').isotope
            (
                { itemSelector: 'article', layoutMode : 'masonry' }
            );
    }
);

当然，您必须用您自己的类#blog-wrap和article/或元素名称（和/或元素 ID）替换它。

我也成功地使用这种方法解决了我的网站的相同问题。

于 2014-09-13T14:34:05.097 回答
0

好吧，我遇到了完全相同的问题，我发现它是由 Firebug 引起的。一旦我关闭了萤火虫，它就可以正常工作。

于 2013-09-06T18:37:13.563 回答