jQuery Isotope Masonry:在调整浏览器大小之前,动画不会启动(Chrome 27.0.1453.110) [英] jQuery Isotope Masonry : animation doesn't initiate until browser is resized (Chrome 27.0.1453.110)
问题描述
我正在研究jQuery Isotope的实现,但是一旦在笔记本电脑和移动设备上调整了浏览器的大小,动画似乎只会醒来".也许我的订购错了?这是我正在工作的网站:
I'm working on a jQuery Isotope implementation but the animation only seems to 'wake-up' once the browser is resized both on laptop and mobile. Perhaps my ordering is wrong? Here's the site that I'm working on:
http://rgbdrinks.squarespace.com/
如果您能够弄清为什么移动实施并不出色,那也将是很棒的,但是我意识到这可能是一个痛苦的世界.
If you are able to work out why the mobile implementation isn't great that would be awesome too but I realise that is probably a world of pain to get into.
非常感谢您的提前帮助,
Many many thanks for your help in advance,
安德鲁
代码如下:
<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&asGalleryImage=true&__SQUARESPACE_CACHEVERSION=1370962041640" alt="" /></div>
<div class="item"><img style="width: 150px;" src="/picture/martini%20glass%20splash.jpg?pictureId=18133349&asGalleryImage=true&__SQUARESPACE_CACHEVERSION=1370962058097" alt="" /></div>
<div class="item"><img style="width: 150px;" src="/picture/tablecloth.jpg?pictureId=18133350&asGalleryImage=true&__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>
推荐答案
我刚刚看过Andrew的网站,发现他已经通过致电解决了问题
I just took a look at Andrew's site and noticed he had solved the problem by calling
jQuery(window).load(
function()
{ jQuery
('#blog-wrap').isotope
(
{ itemSelector: 'article', layoutMode : 'masonry' }
);
}
);
当然,您必须用自己的类和/或元素名称(和/或元素ID)替换#blog-wrap
和article
.
Of course you'll have to substitute #blog-wrap
and article
with your own classes and/or element names (and/or element IDs).
我也已经成功地使用此方法解决了我网站上的相同问题.
I've successfully used this method to solve the same problem with my site too.
这篇关于jQuery Isotope Masonry:在调整浏览器大小之前,动画不会启动(Chrome 27.0.1453.110)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!