Hey there!
I'm currently in the process of creating my own personal website - an online portfolio. While this is my first attempt at building a website from scratch, I must admit that I am quite new to HTML, CSS, JavaScript, and PHP. In fact, my knowledge of JavaScript and PHP is basic at best, so I have been relying on pre-made solutions to help me out. One such solution I am using is the Masonry grid layout library, but unfortunately, I've encountered some issues with it. The main problem I'm facing is that when the webpage is initially loaded, all the images collapse; however, upon refreshing the page, they align properly. I'm really stumped as to how to fix this issue.
For the layout of my project pages, I've utilized Masonry () with the intention of having library items neatly aligned in four rows. Each library item consists of a div containing an image and accompanying text. These divs are floated to the right.
<div class="item img">
<a href="image1.jpg">
<img src="image1.jpg"/>
<p>caption</p>
</a>
</div>
All the images vary in height, and the image width is dependent on the column width. The column width and gutter spacing are set using elements, which are defined as a percentage of the browser window width.
CSS for image sizing:
.item img {
max-width: 100%;
height: auto;
}
HTML and CSS for defining column width and gutter spacing elements:
<div class="col_width"></div>
<div class="gut_width"></div>
.col_width, .item {
width: 22.5%;
}
.gut_width {
width: 2%;
}
The Masonry script, placed just before the closing body and html tags:
<script src='masonry.js'></script>
<script>
var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
gutter: container.querySelector('.gut_width'),
itemSelector: '.item',
columnWidth: container.querySelector('.col_width')
});
</script>
I suspect the issue lies in the variable height of the images, but it's possible that it could be related to the overall layout of the webpage itself.