https://codepen.io/tag/masonry
şuradan örnek kodlara benzer kodlar ile revize edebilirsiniz, anahtar kelime "masonry gallery".
<section class="grid-container">
<div>
<img src="https://picsum.photos/200" />
</div>
<div>
<img src="https://picsum.photos/200/300" />
</div>
<div>
<img src="https://picsum.photos/200" />
</div>
<div>
<img src="https://picsum.photos/200/300" />
</div>
<div>
<img src="https://picsum.photos/200" />
</div>
<div>
<img src="https://picsum.photos/200/300" />
</div>
<div>
<img src="https://picsum.photos/200" />
</div>
<div>
<img src="https://picsum.photos/200/300" />
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script>
$(document).ready(function () {
function initializeMasonry() {
$(".grid-container").masonry({
itemSelector: "div",
columnWidth: "div",
gutter: 0, // Adjust the gutter as needed
});
}
initializeMasonry();
$(".grid-container img").on("load", function () {
initializeMasonry();
});
});
</script>şuda sizinkine uyacak örnek bir çalışma.