砌体在装载时会移位

时间:2016-10-24 16:06:22

标签: javascript jquery jquery-masonry

嘿伙计们有砌砖插件的问题。

我尝试使用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>

0 个答案:

没有答案