Масонство JS Перекрытие предметов

У меня здесь очень странная проблема: [реферальная ссылка удалена]. Продукты первой строки перекрываются с элементами второй строки.

Элементы кладки находятся под главной страницей над нижним колонтитулом. Как видите, с Chrome все выглядит иначе. В Firefox это выглядит хорошо.

Вот как это выглядит у меня в chrome: http://clip2net.com/s/5LIRko

Мой код jQuery:

jQuery(function($){
var $container = $('.woocommerce ul.products');
    $container.masonry({
          columnWidth:10, 
          gutterWidth: 15,
          itemSelector: '.product-category'
    });
});

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

Ответы

Ответ 1

Проблема заключается в ваших изображениях. К тому времени, когда вызывается кладка, ваши изображения не загружены. Таким образом, он предполагает высоту ваших элементов БЕЗ высоты изображения, в котором учитывается.

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

Четыре Пять вариантов:

  • Дождитесь завершения загрузки изображений (есть плагины, которые можно подождать, пока не загрузятся все изображения внутри определенного div)
  • Дождитесь события загрузки вместо готового события. Вместо использования jQuery(function($){ используйте jQuery(window).on('load', function(){ var $ = jQuery;, и вы увидите результаты.
  • Повторно примените кладку после загрузки изображений (не нравится этот... вы увидите мерцание)
  • Мой любимый, не используйте кладку здесь! Отключите JS на своей странице и посмотрите на макет. Это то, что вы хотите. Все divs - это даже высоты и даже ширина. Здесь нет никакой причины использовать кирпичную кладку. Просто плавайте свои элементы и пусть они отображаются в сетке естественным образом.
  • EDIT: еще один вариант. Укажите высоту div, чтобы высота не зависела от загружаемых изображений.

Ответ 2

Вам нужно начать масонство после загрузки всех изображений. Если вы используете jQuery, попробуйте:

var $container = $('#container');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $container.masonry();
});

другие варианты см. в документации по масонству - http://masonry.desandro.com/layout.html#imagesloaded

Ответ 3

Спасибо, ваше решение работает после замены document.ready с помощью jQuery (window).on('load', function() {

Ответ 4

Я решил эту проблему с помощью функции setimeout. Предоставляя секунду или около того (в зависимости от размера # и размера загружаемых изображений), вы можете сначала загрузить изображения, а затем применить кладку.

                $(document).ready(function(){                                                                                                                   
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });     
            $(window).resize(function() 
            {
                // jQuery
                $('.grid').masonry( 'destroy')
                $('.grid2').masonry( 'destroy')                 
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });                 
            function masonry_go(){
                $('.grid').masonry({
                  // options
                  itemSelector: '.grid-item',
                  columnWidth: 300
                });                         
            }       
            function masonry_go2(){
                $('.grid2').masonry({
                  // options
                  itemSelector: '.grid-item2',
                  gutter: 15,
                  columnWidth: 200
                });                         
            }

Ответ 5

Использовать библиотеку ImagesLoaded, сделанную специально для реорганизации блоков при загрузке каждого изображения.

Вы можете скачать его из:

https://github.com/desandro/imagesloaded

Ответ 6

Добавьте минимальную высоту для изображений с CSS. Это решило бы проблему.

.image{ min-height: 250px; }

Ответ 7

У меня работает загрузка кладки после загрузки окна.

jQuery(window).on('load', function(){
    //masonry init and options
    // .. codes
}