javascript - jQuery Isotope 不应用布局。继承问题？

Question

我无法让循​​环在经典的 Masonry 样式布局中与 jquery Isotope 模块对齐。

所有浏览器都在控制台中正常加载脚本，但属性根本不起作用。 .item 类 div 元素的对齐方式全部在左侧并水平堆叠。

Wordpress 是否有某种继承阻止它工作？我在 wordpress 的默认 TwentyTwelve 主题上尝试这个，没有其他插件，但它在 positin:fixed; div 将其包装到页面的下部 50%。

    <script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>js/jquery.isotope.js">
    $(document).ready(function(){
        $('#container').isotope({
            $container.isotope({
                itemSelector:'.item'
            });
      masonry: {
        columnWidth: 20
      };

    });
            </script>

随后是对 html 的调用:

                 <div id="container" >
                    <div class="item">
                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                            <?php if (has_post_thumbnail()) {
                                the_post_thumbnail('thumbnail');
                            }?>

                            <h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                            <?php the_excerpt(); ?>
                        <?php endwhile; endif; ?>
                    </div>
                </div>

有了这些适用的 CSS 属性，我认为这应该不是问题...

    #container {
        position:relative;
    }
    .item {
        width:50px;
        height:auto;
        border:1px;
    }

这里有一个活生生的例子:justingaskin.com

Answer 1

我想你调用 isotope两次，应该是这样的

$( '#container' ).isotope({

itemSelector : '.item',
masonry : { columnWidth: 20 }

});

编辑

查看您的 Wordpress 站点后，您没有加载 isotope jQuery 文件正确。现在，如果您查看控制台，您会注意到对 jquery.isotope.js 的请求失败的。 isotope 的位置文件应该是:

http://justingaskin.com/wp-content/themes/twentytwelve-masonry/js/jquery.isotope.js

在您的网站上:

http://justingaskin.com/js/jquery.isotope.js

<script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>js/jquery.isotope.js"> <-- 这是错误的

应该是:

script type="text/javascript" src="http://<?php echo $_SERVER[HTTP_HOST]; ?>/wp-content/themes/twentytwelve-masonry/js/jquery.isotope.js">