O componente que você está usando está calculando de forma errada as dimensões das áreas das imagens porque elas ainda não foram carregadas. Em suma, o componente trabalha de forma assíncrona com o carregamento das imagens.
Para resolver isso, chame as opções do componente apenas quando as imagens forem carregadas, usando $(window).on("load"...
, desta forma:
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"
}
})
};
});
Você declara a variável $grid
antes do $(window).on("load"...
para que ela tenha escopo fora da função, pois você irá precisar dela em outra parte do código, como neste evento de clique:
$('.filters li').click(function(){
$('.filters li').removeClass('active');
$(this).addClass('active');
var data = $(this).attr('data-filter');
$grid.isotope({
filter: data
})
});
Outra coisa que notei é que você tem um $(document).ready(function()
{
principal e outros dentro, além de uns $( function() {
. Isso é
redundância de código, basta apenas o $(document).ready(function() {
principal.