Изображения загружаются в указанном ниже порядке:
1 | 3 | 5 | 7
2 | 4 | 6 | 8
Но я пытаюсьчтобы найти способ загрузки изображений, как показано ниже:
1 | 2 | 3 | 4
5 | 6 | 7 | 8
Раскомментируйте последние четыре элемента спискав коде ручки, чтобы увидеть его в действии.
Можно ли это сделать только с помощью css или требуется какой-нибудь плагин jQuery?Если есть плагин jquery, который может решить эту проблему, я хочу убедиться, что галерея изображений по-прежнему ведет себя точно так же, как в коде, без каких-либо причудливых анимаций или переупорядочения при изменении размера окна.
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; } } }