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

Question

我正在尝试布局不同尺寸的图像。 我尝试使用砖石建筑，但没有用。 现在图库页面看起来像这个图库页面

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

Answer 1

我不知道砖石（或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>