这可以使用CSS3来实现吗？
这可以使用CSS3来实现吗？
提问于 2018-07-05 02:33:30
我将要向你展示的图片显示了我想要在我的网站上上传的图片的布局。
不幸的是，我目前在后端通过创建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，
在column 2中使用image 6
甚至我也知道，仅仅为了实现一些样式而在后端做一些要求如此之高的事情是非常非常不明智的，这就是为什么我一直在想是否可以使用纯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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51179343
复制相关文章
相似问题
腾讯云开发者
