Question

我将要显示的图像显示了我想要的网站上已上传图像的布局。

不幸的是，我目前正在后端通过创建4个flex-box列，然后遍历所有图像并将它们分为4组来实现此目的。然后，我遍历每个组并在1列中显示该组。结果是：

image 1进入column 1，

image 2进入column 2，

image 3进入column 3，

image 4进入column 4，

然后

image 5再次进入column 1，然后

image 6进入column 2

即使我了解在后端执行一些要求以实现某种样式也是非常不明智的，这就是为什么我一直想知道是否可以使用纯CSS3做到这一点。

我决定也上传我的后端代码，这使我可以实现这一目标。

<div class="flex-grid-home">
@php($count = 0)
@foreach($images as $image)
    @if ($count % 4 == 0)
        @php($images1[] = $image)
    @elseif($count % 4 == 1)
        @php($images2[] = $image)
    @elseif($count % 4 == 2)
        @php($images3[] = $image)
    @else
        @php($images4[] = $image)
    @endif
    @php($count++)
@endforeach

<div class="col-home-1">
@if (!empty($images1))
    @foreach($images1 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach

@endif
</div>

<div class="col-home-2">
@if (!empty($images2))
    @foreach($images2 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
@endif
</div>

<div class="col-home-3">
    @if (!empty($images3))
            @foreach($images3 as $image)
                <div class='imageContainer'>
                    <div class="stickyContainer blackGradient">
                        <h1 class='imageTitle'>{{$image->name}}</h1>
                        <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                        <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                        @auth
                        <div class='votingContainer'>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                            <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                        </div>
                        @endauth
                    </div>
                </div>
            @endforeach
    @endif
</div>

<div class="col-home-4">
    @if (!empty($images4))
            @foreach($images4 as $image)
                <div class='imageContainer'>
                    <div class="stickyContainer blackGradient">
                        <h1 class='imageTitle'>{{$image->name}}</h1>
                        <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                        <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                        @auth
                        <div class='votingContainer'>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                            <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                        </div>
                        @endauth
                    </div>
                </div>
            @endforeach
    @endif
</div>

</div>

Answer 1

是的，可以实现。您必须学习CSS-grid才能进行这种设计。检查一下：Learn CSS Grid in 5 minutes

此外，首先使用背景色进行操作，以使任务更轻松一些，然后有两个选择：

将图像放入div中。
使用background: url('image.png');属性。

如果您想在原始CSS中使用它，请按照以下步骤操作：

现在在CSS中使用div创建4个class='column'

.column { width: 25vw; //here 25 because, since we have 4 columns(100/4=25) }

将div放在宽度为100%的列中，并设置任意高度。

Answer 2

您是对的，感觉后端正在做太多工作。理想情况下，后端将以某种期望的顺序返回线性资源列表，而前端则负责将其显示给用户。

不幸的是，仅靠CSS来尝试实现确切的布局并不容易。我能获得的最接近的是Flex反向包装布局，下面的演示。

.container {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-end;
}

.box {
  flex: 0 0 calc(25% - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  border: 1px solid black;
  font-size: 48px;
}

.one { height: 100px; }
.three { height: 125px; }
.five { height: 80px; }

<div class="container">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
  <div class="box six">6</div>
</div>

但是，您会看到项目严格按行排列，并且包装效率不高。

其他替代方法包括在每个元素上使用float: left或在容器上使用columns: 4。这些也是不完美的。

我建议看一下Masonry JS或Bricks，这是将元素打包到列中的框架。它们有助于抽象化实现我认为想要的布局的某些复杂性。

可以使用CSS3实现吗？

2 个答案: