Question

我正在尝试布局不同尺寸的图像。我尝试过使用砖石，但它不起作用。现在，图库页面看起来像Gallery Page

CSS：

  .mediaContainerAllSizes{
        padding: 2px;
        border: 1px;
        float: left;
        text-align: center;
    }

    #mediaListContainer{
    width: 1200px; 
    overflow: auto;
    margin-top: 0px;
    padding-top: 4px;
    clear: both;
}

注意：mediaListContainer是从gallery.tpl文件重定向的

<div id="mediaListContainer">
   {foreach $mediaArray as $media}
      {include file='media.container.tpl'}
    {/foreach}

 <script type="text/javascript" src="{$baseURL}/assets/javascript/masonry.pkgd.min.js">
        $('#mediaListContainer’').masonry({
                itemSelector: '.mediaContainerAllSizes',
                columnWidth: 200
            });
  </script>

我可以知道布置此图库页面的最佳方法是什么以及为什么砌体不起作用？

BTW我使用过这个砌体文件而没有改变任何东西。我必须在这里改变一切吗？ http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js

Answer 1

我不知道砌体（或jQuery，就此而言），但经过一些使用vanilla JS实例的测试后，我得到了它的支持。您似乎必须设置mediaContainerAllSizes {max-size: columnWidth}以获得某种可识别的网格。

检查代码段，我使用了您的值，但是使用了砌体示例中的默认类名。

现在你把它放在你的......

（图片由unsplash.it提供）

/* default html stuff */
html, body                  { box-sizing: border-box; height: 100%; width: 100%;
                              margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after        { box-sizing: inherit }


.grid-item {
    max-width: 400px; /*equal to 'columnWidth' in HTML data-masonry-options*/
    padding: 2px;
    border: 1px;
    float: left;
    text-align: center;
    background: yellow
}

.grid {
    width: 1200px; /* make 'columnWidth' a division of this width */
    overflow: auto;
    margin: 0 auto;
    padding-top: 4px;
    clear: both;
    background: #f0f0f0
}

* {
    outline: 1px dotted red
}

<!-- Only include the JS library, works automatic -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>

<div class="grid js-masonry" data-masonry-options='{ "columnWidth": 400, "itemSelector": ".grid-item" }'>

   <img class="grid-item" src="https://unsplash.it/300/500?image=200"/>
   <img class="grid-item" src="https://unsplash.it/300/250?image=859"/>
   <img class="grid-item" src="https://unsplash.it/512/200?image=761"/>
   <img class="grid-item" src="https://unsplash.it/400/300?image=225"/>
   <img class="grid-item" src="https://unsplash.it/600/100?image=227"/>
   <img class="grid-item" src="https://unsplash.it/100/100?image=076"/>

   <img class="grid-item" src="https://unsplash.it/300?image=200"/>
   <img class="grid-item" src="https://unsplash.it/300?image=859"/>
   <img class="grid-item" src="https://unsplash.it/512?image=761"/>
   <img class="grid-item" src="https://unsplash.it/400?image=225"/>
   <img class="grid-item" src="https://unsplash.it/600?image=227"/>
   <img class="grid-item" src="https://unsplash.it/100?image=076"/>

   <img class="grid-item" src="https://unsplash.it/500?image=200"/>
   <img class="grid-item" src="https://unsplash.it/250?image=859"/>
   <img class="grid-item" src="https://unsplash.it/200?image=761"/>
   <img class="grid-item" src="https://unsplash.it/300?image=225"/>
   <img class="grid-item" src="https://unsplash.it/100?image=227"/>
   <img class="grid-item" src="https://unsplash.it/100?image=076"/>

   <img class="grid-item" src="https://unsplash.it/300/500?image=200"/>
   <img class="grid-item" src="https://unsplash.it/300/250?image=859"/>
   <img class="grid-item" src="https://unsplash.it/512/200?image=761"/>
   <img class="grid-item" src="https://unsplash.it/400/300?image=225"/>
   <img class="grid-item" src="https://unsplash.it/600/100?image=227"/>
   <img class="grid-item" src="https://unsplash.it/100/100?image=076"/>

</div>

如何在图库页面中布置不同大小的图像？

1 个答案: