javascript - 如何在图库页面中布局不同尺寸的图像？

我正在尝试布局不同尺寸的图像。我尝试使用砖石建筑，但没有用。现在图库页面如下所示：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>

我可以知道布局此图库页面的最佳方法是什么，为什么砖石结构不起作用？

顺便说一句，我使用了这个砌体文件而没有做任何更改。我是否需要在这里进行任何更改？ http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js

最佳答案

我不知道砖石（或jQuery，就此而言），但是在使用香草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>