砖石问题

Question

我想第一次使用masonry.js而且我遇到了麻烦......我检查了解决方案，但我没有/不能看到错误...

我的想法是在我的WordPress Feed的砌体中显示帖子。 非常感谢任何帮助。 那是

<div id="masonry" class="article_div js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>>

    <?php query_posts('category_name=cat1, cat2, cat3');?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="item">
    <?php the_post_thumbnail(); ?>

    <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
    <p><?php the_content(); ?>
    </div>
    <?php endwhile; else: endif; ?>

    <br class="clear">

</div>

CSS文件：

.article_div{
position:absolute;
top:100%;
background-color:#FFF;
min-height:100%;
width:100%;
padding-left:15%;
padding-right:15%;
}
.item{
width:45%;
}

或者您还有其他建议吗？ 谢谢你的帮助：*

Answer 1

我会做这样的事情，你可以在哪里添加自定义jquery代码

var $isotope_container = $('#masonry');
var sortBy = 'random';
var columnWidth = '.item';

$isotope_container.isotope({
    layoutMode: 'masonry',
    masonry: {
      columnWidth: columnWidth
    },
    itemSelector : '.item',
    sortBy: sortBy
});

您的主题和砌体需要isotope.js。