Галерея Masonry в процентах

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

Галерею Masonry вполне можно сделать в процентном соотношении блоков. Продемонстрирую работу Masonry на примере вывода категорий Woocommerce.

Верстка плитки

<pre class="wp-block-preformatted"><div class="grid">
<?php 
$terms = get_terms( array(
    'taxonomy' => 'product_cat',
	'hide_empty' => true,
  	'pad_counts'=> true,
  	'orderby' => 'name',
        'parent' => $term->term_id,
	'exclude' => array(21,22,23,63)
) );  
?>  
	
<div class="grid-sizer"></div>

<?php if($terms) : ?>
<?php foreach($terms as $term) : ?>
  
<div class="grid-item <?php echo $term->term_template; ?>"> 

	<a href="<?php echo get_term_link($term->term_id);?>">
		<p><?php echo $term->name;?></p>
		<?php $thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
		$image = wp_get_attachment_url( $thumbnail_id );
		if (!empty($image)) {
		echo '<img src="'.$image.'" title="'.$term->name.'" alt="'.$term->name.'" 
		srcset="'.wp_get_attachment_image_srcset( $thumbnail_id, 'large' ).'" sizes="'.wp_get_attachment_image_sizes( $thumbnail_id, 'large' ).'">'; 
		}?>
	</a>
  
</div>
  
<?php endforeach; ?>
<?php endif; ?> 
</div></pre>

echo $term->term_template; — это вывод необходимой ширины блока, или ее отсутствие. Работает на решении выбора шаблона.

Стили плитки

/* New masonry */
.grid {margin-bottom: 30px;}
.grid-item.w2 {width: 66.66%;}
.grid-item.h2 {height: 800px;}

.grid-sizer {width: 33.33%;}
.grid-item {width: 33.33%; padding: 5px; height: 400px;}

.grid-item {height: 400px;}

@media screen and (max-device-width: 1024px) {  
	.grid-item {height: 300px;}
	.grid-item.h2 { height: 600px; }	
}

@media screen and (max-device-width: 800px) {  
	.grid-item {height: 250px;}
	.grid-item.h2 { height: 500px; }
	.grid-item p {font-size: 1.6rem;}
}

@media screen and (max-device-width: 425px) {  
	.grid-sizer {width: 50%;}
	.grid-item {width: 50%; height: 200px; padding: 3px;}
	.grid-item.w2 {width: 100%;}
	.grid-item.h2 {height: 400px;}
	.grid-item p {padding: 20px; font-size: 1.2rem;}
}

@media screen and (max-device-width: 320px) {  .grid-item, .grid-item.w2 {width: 100%;} }

Дополнительные стили оформления изображения и заголовка:

.grid-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: brightness(100%);
  -o-transition: all 1.0s;
  transition: all 1.0s ease;
  -webkit-transition: all 1.0s ease 0s;	
}

.grid-item:hover img {filter: brightness(60%);}

.grid-item p {
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    font-size: 2rem;
    font-weight: 400;
    color: #fff;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
    -o-transition: all 1.0s;
    transition: all 1.0s ease;
    -webkit-transition: all 1.0s ease 0s;
}

Скрипт плитки

jQuery(window).load(function(){
	 jQuery('.grid').masonry({ 
	percentPosition: true,
	columnWidth: '.grid-sizer',
	itemSelector: '.grid-item'	
	//columnWidth:300, 		 
	//gutter: 10	
	});
 });

[site-socialshare]