Для создания галереи с изображениями разной высоты, вы можете использовать библиотеку masonry.js. Masonry.js автоматически распределит изображения в зависимости от их высоты, создавая красивый и динамичный макет.
Для примера, вот простой код использования Masonry.js:
1. Вам нужно подключить библиотеку Masonry.js к вашему проекту:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
```
2. Создайте HTML разметку для галереи:
```html
<div class="grid">
<div class="grid-item"><img src="image1.jpg" alt="Image 1"></div>
<div class="grid-item"><img src="image2.jpg" alt="Image 2"></div>
<div class="grid-item"><img src="image3.jpg" alt="Image 3"></div>
<!-- Добавьте столько изображений, сколько вам нужно -->
</div>
```
3. Инициализируйте Masonry.js на вашей галерее:
```html
<script>
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
</script>
```
4. Теперь ваша галерея будет автоматически адаптироваться под разные высоты изображения, создавая красивый и эстетичный макет.
Надеюсь, это поможет вам создать галерею с изменяемой высотой изображений!