Question

我希望有一个显示照片网格的图库页面。照片的顺序非常重要，需要从左到右按行运行。此外，布局需要响应，根据页面大小具有不同的列数。如果所有照片都是风景照片那么这不是问题。我现在这样做如下：

HTML

<div class="thumbcontainer">
    <?php
        for ($i=1; $i<=27; $i++){
            echo '<a class="thumbnail" href="gallery/image.php?image=' . $i . '"><img src="gallery/thumbnails/image_' . $i . '.jpg" width="100%"></a>' . "\n";
        }
    ?>  
</div>

CSS

@media all and (min-width: 905px){
    .thumbnail{
        width: 19%;
    }
}
@media all and (max-width: 904px){
    .thumbnail{
        width: 24%;
    }
}
.thumbcontainer{
    width: 100%;
    display: block;
    text-align: center; 
    padding-top: 3px;
}
.thumbnail{
    display: inline-block;
    text-align: center;
    padding-bottom: 8px;
    margin-left: 2px;
    margin-right: 2px;
}

问题是我希望能够在网格中拥有纵向图像，占据网格的两行（它们的宽度与景观相同，高度的两倍），同时保持响应性的网格。例如，如果L表示横向和P纵向，而数字表示图像编号，则网格可能如下所示：

L1 L2 P3 L4

P5 L6 P3 L7

P5 L8 L9 L10

有没有办法做到这一点？我到处搜索并绞尽脑汁，但在没有事先了解所需列数/行数和订单中肖像图像位置的情况下，无法想到这样做的方法。任何指针都将非常感激。

Answer 1

我认为您需要javascript，或者至少需要像isotope ::

这样的插件

http://isotope.metafizzy.co/layout-modes/masonry.html

响应式画廊与景观和肖像图像

1 个答案: