The images are loaded in the order shown below:
1|3|5|7
2|4|6|8
But I'm trying to find a way to load the images as shown below:
1|2|3|4
5|6|7|8
Uncomment the last four list items in the codepen to see it in action.
Can this be done with css only or is there some jQuery plugin that's required? If there's a jquery plugin that can solve this issue, I want to make sure that the image gallery still behaves the exact same way as in the codepen, without any fancy animations or reordering as the window is resized.
https://codepen.io/pkroupoderov/pen/BMRMVm?editors=1100
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./temp.css">
</head>
<body>
<div class="photo-container">
<ul>
<li>
<img src="https://farm8.staticflickr.com/7909/33089338628_052e9e2149_z.jpg" alt="">
</li>
<li>
<img src="https://farm8.staticflickr.com/7894/46240285474_81642cbd37_z.jpg" alt="">
</li>
<li>
<img src="https://farm8.staticflickr.com/7840/32023738937_17d3cec52f_z.jpg" alt="">
</li>
<li>
<img src="https://farm8.staticflickr.com/7815/33089272548_fbd18ac39f_z.jpg" alt="">
</li>
<!-- <li>
<img src="https://farm5.staticflickr.com/4840/40000181463_6eab94e877_z.jpg" alt="">
</li>
<li>
<img src="https://farm8.staticflickr.com/7906/46912640552_4a7c36da63_z.jpg" alt="">
</li>
<li>
<img src="https://farm5.staticflickr.com/4897/46912634852_93440c416a_z.jpg" alt="">
</li>
<li>
<img src="https://farm5.staticflickr.com/4832/46964511231_6da8ef5ed0_z.jpg" alt="">
</li> -->
</ul>
</div>
</body>
</html>
CSS:
ul {
list-style-type: none;
padding-left: 0;
}
.photo-container ul li {
margin-bottom: 4px;
}
.photo-container ul img {
width: 100%;
}
/* Responsive image layput configuration*/
.photo-container ul {
line-height: 0;
column-gap: 4px !important;
column-count: 4;
}
@media (max-width: 1000px) {
.photo-container ul {
column-count: 4;
}
}
@media (max-width: 800px) {
.photo-container ul {
column-count: 3;
}
}
}
