Question

我已经尝试了几个小时试图让它发挥作用。砌体js似乎加载但我最终在右侧获得了我的帖子的一列。我使用Ebedly作为我的帖子，他们显示确定。

这是我的入队代码

    To create a new runnable JAR file in the workbench:

1.From the menu bar's File menu, select Export.
2.Expand the Java node and select Runnable JAR file. Click Next.
3.In the  Opens the Runnable JAR export wizard Runnable JAR File Specification page, select a 'Java Application' launch configuration to use to create a runnable JAR.
4.In the Export destination field, either type or click Browse to select a location for the JAR file.
5.Select an appropriate library handling strategy.
Optionally, you can also create an ANT script to quickly regenerate a previously created runnable JAR file.

我的css：

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

和我的博客html：

.item { width: 25%; }

<?php get_header(); ?>

        <div id="content" class="row">


<div class="responsive-title"><h1 class="hobo page-title a">NEWS</h1>   </div>
<div id="masonry-wrapper" class="masonry">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              <div class="item">
                <article <?php post_class(); ?> role="article">
    <header>

                        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'wpbs-featured' ); ?></a>

                        <div class="page-header"><h1 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>



                    </header> <!-- end article header -->

                    <section class="post_content">
                        <?php the_content( __("Read more &raquo;","wpbootstrap") ); ?>
                    </section> <!-- end article section -->

                    <footer>

                        <p class="tags"><?php the_tags('<span class="tags-title">' . __("Tags","wpbootstrap") . ':</span> ', ' ', ''); ?></p>

                    </footer> <!-- end article footer -->

                </article> <!-- end article -->
               </div>

Answer 1

您错过了砌体文档中建议的itemSelector。 masonry.desandro.com/options.html

要解决此问题，您可以使用以下代码替换您的砌体包装div：

<div id="masonry-wrapper" class="masonry js-masonry"
data-masonry-options='{ "itemSelector": ".item" }'>

还有其他可用的选项，例如columnWidth，您可能想要尝试一下。花一些时间阅读文档。

Wordpress Masonry Blog一个colomn

1 个答案: