时间戳

首页 > 解决方案 > 创建产品库

css - 创建产品库

问题描述

我想显示我的画廊图像，如下所示， 预期产出

该图像来自一个 laravel 控制器作为一个集合并被分块。所以基本上我知道如何对图像进行分块，我想我应该将这些块进一步分块，这就是我的问题所在。我该怎么做或最好的方法是什么，有没有人可以告诉我如何或在哪里可以学习做到这一点。

到目前为止，我已经尝试过分块引导网格系统，但这只是根据图像数量生成行和列。这是我使用块加引导程序的尝试

    @foreach ($images->chunk(4) as $key=>$image)
        <div class="row">
            @foreach ($image as $item)
            @if ($key===0)
            <div class="col-md-3">
                <div>
                    <span class="image-block block2">
                    <a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">                         
                            <img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
                </span>
                </div>
            </div>                        
            @else
            <div class="col-md-4">
                <div>
                    <span class="image-block block2">
                    <a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">                         
                            <img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery"></a>
                </span>
                </div>
            </div>
                
            @endif
            @endforeach
        </div>
        @endforeach

标签： cssbootstrap-4laravel-8

解决方案

您可以简单地使用 CSS Flex来实现这一点。

您可以像这样遍历图像：

<div class="gallery">
    @foreach ($image as $item)
    <div class="gallery__item">
        <a class="image-zoom" href="{{ asset('uploads/property/large/'.$item->path) }}" rel="prettyPhoto[gallery]">
            <img src="{{ asset('uploads/property/small/'.$item->path) }}" class="img-responsive" alt="CEC Gallery">
        </a>
    </div>
    @endforeach
</div>


.gallery {
    display: flex;
    align-items: start;
    justify-content: left;
    flex-direction: row;
    flex-wrap: wrap;
}
.gallery__item {
    background-color: #ccc;
    width: 50%;
    flex-basis: 50%;
    max-width: 50%;
    min-height: 400px;
    text-align: center;
    line-height: 400px;
}
<div class="gallery">
  <div class="gallery__item">1</div>
  <div class="gallery__item">2</div>
  <div class="gallery__item">3</div>
</div>

假设：

  1. 图像之间没有装订线。

推荐阅读