Каменная кладка в wordpress только показывает один столбец

Question

Итак, я знаю, что кладка в одном столбце была покрыта несколько раз в стеке, но я не очень хорошо знаком с jquery, и я не уверен в настройках, которые мне нужно сделать. Я также не очень разбираюсь в Wordpress, чтобы знать, допустим ли я здесь явную ошибку. Я редактирую тему, и я пытаюсь сделать блог используемым макетным макетом. Тема вызывает цикл post из своего собственного php-файла, поэтому блог вроде бы разбит на несколько php-файлов. Надеюсь, я включу правильную информацию.

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

Я добавил это к своим функциям.

function wdv_enqueue_scripts() { 
    wp_enqueue_script('jquery-masonry'); // adds masonry to the theme 
} 
add_action('wp_enqueue_scripts', 'wdv_enqueue_scripts'); 

это мой footer.php

<script> 
    jQuery(document).ready(function($) { 
     $('#container2').masonry({ columnWidth: 220 }); 
    }); 
</script> 

Вот мой код для цикла.

<div id="container2"> 
    <?php 
    global $ae_post_factory; 
    $ae_post = $ae_post_factory->get('post'); 
    $post = $ae_post->current_post; 
?> 
<div class="brick"> 
<div class="brick_header"> 
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" > 
     <h4 class="media-heading title-blog"><?php the_title(); ?></h4> 
    </a> 
</div> 
<div class="brick_featured_image"> 
    <?php if (has_post_thumbnail()) : ?> 
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
    <?php the_post_thumbnail(); ?> 
    </a> 
    <?php endif; ?> 
</div> 
<?php the_excerpt(); ?> 
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a> 
</div> 
</div><!-- container --> 

И это CSS

* masonry brick layout */ 
#container2 { 
    width: 100%; /* width of the entire container for the wall */ 
    margin-bottom: 10px; 
} 

.brick { 
    width: 30%; /* width of each brick less the padding inbetween */ 
    padding: 0px 10px 15px 10px; 
    background-color: #fff; 
    margin-top: 5px; 
} 

.brick_header{ 
    border-bottom: solid 1px #1d1d1d; 
    padding-bottom: 10px; 
    padding-top: 10px; 
} 

.brick_header a{ 
    color: #ffff00; 
} 

.brick_header a:hover{ 
    color: white; 
} 

.brick_featured_image{ 
    width: 100%; 
    margin-top: 10px; 
} 

.brick_featured_image img{ 
    width: 100%; 
    height: auto; 
} 

Answer 1

Здесь вы предоставляете ширину столбца в JS 220px. И в CSS: 30%. Возможно, это создает проблемы.

Убедитесь, что ваша структура HTML выглядит так.

<div id="container2"> 
    <div class="brick">...</div> 
    <div class="brick">...</div> 
    <div class="brick">...</div> 
</div> 

И CSS:

.container2{ 
    width:100%; 
} 
.brick{ 
    width:25%; 
    /* 
    This should be respective of the columns you want 
    Like for 4 columns, 100%/4 = 25% 
    */ 
} 

И JS.

var $container2 = $('#container2'); 
$container.masonry({ 
    itemSelector: '.brick' 
}); 

Для более подробной объяснения: http://masonry.desandro.com/#getting-started

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

Answer 2

Я лично использую класс «JS-кладка» в основном потому, что если вы используете рамки, такие как Bootstrap или Модеста Grid, он сохранит настройки переплета и т.д.

Вот пример:

<div class="js-masonry"> 
<?php if (have_posts()): ?> 
<?php while (have_posts()) : the_post(); ?> 
<div class="dt-6 tl-6 tp-6"> 
    <article> 
     <h2> 
      <a href="<?php esc_url(the_permalink()); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark"> 
       <i class="fa <?php echo strtolower(str_replace(" ", "-", get_field('project_type'))); ?>"></i> 
       <?php the_title(); ?> 
      </a> 
     </h2> 
     <?php the_excerpt(); ?> 
     <div class="download"> 
      <a href="<?php esc_url(the_permalink()); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark"> 
       View <?php the_title(); ?> 
      </a> 
     </div> 
    </article> 
</div> 
<?php endwhile; ?> 
<?php else: ?> 
    <h2>No posts to display</h2>  
<?php endif; ?> 

Обратите внимание, что <div class="js-masonry"> находится за пределами времени.