Masonry 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, которое влияет на вывод строки?

Источник

9 ответов

Решение

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

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

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

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

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

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

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

Источник

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

Источник

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

                $(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
                });                         
            }
Источник

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

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

https://github.com/desandro/imagesloaded

Источник

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

.image{ min-height: 250px; }
Источник

это, скорее всего, потому, что вы слишком рано импортируете js, и у него нет цели для выполнения, попробуйте добавить «отложить» к импорту, вы можете сделать так:

      <script type='text/javascript' src='src/js/mensory-min.js' defer></script>

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

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

Источник

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

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

Благодарю.

Источник

$(окно).on('загрузка', функция (){ });

$(window).on('load',function(){
//code
});

//use load event instead of document.ready starting of jquery

Источник
Другие вопросы по тегам