嘿伙计们有砌砖插件的问题。
我尝试使用percentPosition加载简单布局:true;问题是当一切都加载,布局加载没有沟槽,并在以后添加它导致所有图像移动,它看起来很安静烦人。 似乎无法找出解决方案来加载它没有任何改变的方式。贝娄是代码:
以下是链接:dev3.oaknyc.com
<div class="section group">
<div class="col-sizer"></div>
<div class="gutter-sizer"></div>
<div class="col col-span2">
<img src={{media url="img/10-21/1.jpg"}}>
<a href={{store url="blog/introducing-hope-shoes-more/"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Introducing:</span>
<h3>HOPE for women + men</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/2.jpg"}}>
<a href={{store url="women/new-items.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Just In:</span>
<h3>HENRIK VIBSKOV</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/3.jpg"}}>
<a href={{store url="women/designers/oak.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>OAK Collection Women</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/4.jpg"}}>
<a href={{store url="men/designers/oak-collection.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3> OAK Collection Men</h3>
</div>
</div>
</a>
</div>
<div class="col col-span2">
<img src={{media url="wysiwyg/blanco/img/10-21/5.jpg"}}>
<a href={{store url="women/designers/laura-siegel.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Laura Siegel</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/6.jpg"}}>
<a href={{store url="women/accessories.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Women's Accessories</h3>
</div>
</div>
</a>
</div>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.section').imagesLoaded(function(){
jQuery('.section').masonry({
// options
columnWidth: '.col-sizer',
itemSelector: '.col',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
//]]>
</script>