Masonry: странное поведение

[Светлана Г.]

Здравствуйте!

Впервые решила использовать на сайте библиотеку Masonry.

 

Вот так подключаю: 

 

<ul id="masonry" class="js-masonry clearfix"   data-masonry-options='{ "columnWidth": 210, "itemSelector": ".item", "gutter": 10 }'>

 

Но при тестировании обнаружилась странная проблема. если страницу просматривать в Safari под Windows 8, то сначала страница выглядит так:

 

 

Затем, если изменять ширину экрана вручную, то все встает на свои места.

 

И еще в других браузерах сначала картинки выстраивались в один вертикальный ряд, а после изменения ширины экрана - также все восстанавливалось.

 

В чем может быть проблема?

Edited November 27, 2014 by Светлана Г.

[npofopr]

Возможно в картинках.

Попробуйте http://masonry.desandro.com/appendix.html#imagesloaded

[Светлана Г.]

Возможно в картинках.

Попробуйте http://masonry.desandro.com/appendix.html#imagesloaded

Сделала так:

<script type="text/javascript">// or with jQuery// initialize Masonryvar $container = $('#masonry').masonry();// layout Masonry again after all images have loaded$container.imagesLoaded( function() {  $container.masonry({	   columnWidth: 210, 	   itemSelector: '.item',	   gutter: 10  }    );});</script>

Но эта проблема не исправилась. И еще картинки частично слепились.

Edited November 27, 2014 by Светлана Г.

[Светлана Г.]

Прочитала, что нужно было добавить скрипт imagesloaded.pkgd.min.js. Добавила, но ничего не исправилось.

Edited November 27, 2014 by Светлана Г.

[Светлана Г.]

Может быть попробовать другую библиотеку, например: https://github.com/GBKS/Wookmark-jQuery

Есть у кого-нибудь опыт ее использования?