сделать три колонка отзывчивого MASONRY сетки

Question

ЭТО САМ Q &

Часто мой креативным директор спросит построить масонства питания сетки, но чтобы сделать его отзывчивым. Тогда new version of Masonry может это сделать, но с изображениями с переменной высотой исходный макет выглядит сломанным. Решением является плагин imagesLoaded, но не сразу видно, как наилучшим образом применить его к сетке, особенно если эта сетка генерируется CMS (WordPress в моем случае).

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

Answer 1

Для 3-х столбчатой ​​сетки с решеткой 25px вокруг каждого блока. Я могу сделать этот желобок отзывчивым/переменным.

Очевидно, что вам необходимо включить файлы масонства и imagesLoaded JS на свою страницу.

Ваш HTML будет выглядеть примерно так:

<div class="grid"> 
    <div class="block"> 
     <img src="example.jpg"> 
    </div> 
</div> 

Ваш CSS будет таким:

.block { 
    float: left; 
    margin-bottom: 25px; 
    width: calc(33.33% - 17px); 
    opacity: 0; 
} 
.block img { 
    width: 100%; 
    height: auto; 
} 

И JS будет что-то вроде этого:

jQuery(document).ready(function(){ 

    // Init Masonry 
    var opts = { 
     itemSelector: '.block', 
     columnWidth: '.block', 
     gutter: 25, 
     percentPosition: true, 
     transitionDuration: 0 
    } 
    var $grid = jQuery('.grid').masonry(opts);   

    // Position and show image as it loads 
    jQuery('.grid').imagesLoaded().progress(function(imgLoadData, elem){ 
     jQuery(elem.img).closest('.block').css('opacity', 1); 
     $grid.masonry('layout'); 
    }); 

}); 

Answer 2

Я бы рекомендуем использовать изотоп вместо масонства, поскольку он более продвинутый! и он очень похож на кладке, ваш HTML будет что-то вроде этого:

<div class="grid"> 
    <div class="item"> <img src="test.jpg"> </div> 
    <div class="item"> <img src="test.jpg"> </div> 
    <div class="item"> <img src="test.jpg"> </div> 
    <div class="item"> <img src="test.jpg"> </div> 
</div> 

если вы хотите 3 колонки, то CSS будет таким:

.item { 
    float: left; 
    width: 33.33%; 
} 

.item img { 
    width: 100%; 
    display: block; 
} 

, а затем в JS вам нужно инициализировать Изотоп, а также обновить макет, когда изображение загружается, вам потребуется помощь плагин imagesLoaded, он должен выглядеть примерно так:

jQuery(document).ready(function(){ 

    // Initialize Isotope 

    $('.grid').isotope({ 
     itemSelector: '.item', 
     percentPosition: true, 
    }); 

    // Refresh the layout of the grid each time an image gets loaded 

    $('.grid').imagesLoadedMB().progress(function() { 
     $('.grid').isotope('layout'); 
    }); 

}); 

Я лично предпочел бы нам ea плагин, готовый к использованию, как этот: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020 с этим плагином вы можете указать очень простое пространство между элементами, количеством столбцов на каждом разрешении и т. д., также оно включает в себя возможность добавления фильтров, сортировки и поиска , попробуйте!