The component you are using is wrongly calculating the dimensions of the image areas because they have not yet been loaded. In short, the component works asynchronously with the loading of the images.
To resolve this, call component options only when images are loaded, using $(window).on("load"...
, like this:
var $grid = $(".grid").isotope(); // declara a variável atribuída ao componente
$(window).on("load", function(){
if(document.getElementById("menu") || document.getElementById("gallery")){
$grid.isotope({
itemSelector: ".all",
percentPosition: true,
masonry: {
columnWidth: ".all"
}
})
};
});
You declare the variable $grid
before the $(window).on("load"...
so that it is scoped out of the function because you will need it in another part of the code, as in this click event:
$('.filters li').click(function(){
$('.filters li').removeClass('active');
$(this).addClass('active');
var data = $(this).attr('data-filter');
$grid.isotope({
filter: data
})
});
Another thing I noticed is that you have a $(document).ready(function()
{
master and others inside, plus a $( function() {
. That is
code redundancy, just the $(document).ready(function() {
main.