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

Question

我正在尝试对不同尺寸的图像进行布局。我尝试使用 masonry ，但它不起作用。现在画廊页面看起来像这样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>

我能知道布局此画廊页面的最佳方式是什么吗？为什么砖石结构不起作用？

顺便说一句，我已经使用了这个 masonry 文件而没有改变任何东西。我必须在这里改变任何东西吗？ http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js

Answer 1

我不知道 masonry (或 jQuery，就此而言)，但在使用 vanilla JS 示例进行一些测试后，我掌握了它。看来您必须设置 mediaContainerAllSizes {max-size: columnWidth} 才能获得某种可识别的网格。

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

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

(图片由 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>