Masonry криво отображается при первой загрузке, как быть?

Question

[Александр Иванов]

masonry.desandro.com - при сбрасывании кеша.
Что я только уже не пробовал, и ведь на всех остальных сайтах, где я раньше это использовал всё нормально.

<div class="blk grid-item" style="position: absolute; left: 33.3068%; top: 209px;">
      <figure>
        <a href="/blog/"><img src="/assets/фыыф/Блог_07_386x208_585.jpg" alt="Запись блога"></a>
        <div class="cnt-blog">
          <figcaption>
            <a href="/"><h3>Запись блога</h3></a>
            <p>If you're trying to change the values of some of the variables in this templa...</p>
            
          </figcaption>
        </div>
      </figure>
    </div>

Comments

[bears]

быстро получилось решить вот с этой штукой imagesloaded.desandro.com не уверен что это тру вэй, но помогло

[Александр Иванов]

bears: спасибо посмотрю

[Александр Иванов]

bears: да, отличная штука

Answer 1

[Anna_BS]

Это из-за картинок
нужно прописать высоту или инициализировать работу Масонри, после того, как все картинки будут загружены

$(document).ready(function() {
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item'
}).imagesLoaded(function() {
$('#content').masonry('reload');
});
});

Comments

[Александр Иванов]

Огромнейшее вам спасибо!!! Вы меня очень выручили )

[Anna_BS]

cimonlebedev: не за что)

Answer 2

[Иван]

Если честно, то у меня нормально сходу отображается.
Вообще подобное обычно бывает, если скрипт срабатывает до загрузки самой страницы. Т.е. не у всех элементов уже есть размер и скрипт выстраивает их "абы как".

Comments

[Александр Иванов]

Я его даже в самое начал ставил. Никакой разницы не было
w3bits.com/css-masonry - сейчас так делаю