jQuery Isotope 未应用布局。继承问题？答案

【问题标题】：jQuery Isotope not applying layout. Inheritance the issue?jQuery Isotope 未应用布局。继承问题？
【发布时间】：2013-05-05 02:35:14
【问题描述】：

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

所有浏览器都在控制台中正常加载脚本，但属性根本不起作用。 .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

【问题讨论】：

`$container` 是在哪里定义的？，我之前从未使用过isotope，但看起来你调用了两次。
可能是。我仍然在处理后端开发 js。一个活生生的例子会有帮助吗？
一个活生生的例子会有所帮助。
查看isotope 文档后，您肯定设置错误。在下面查看我的答案。
添加了现场示例的 URL。感谢您的洞察力！

标签： javascript jquery css html wordpress

【解决方案1】：

我想你打电话给isotope 两次，应该是这样的

$('#container').isotope({

itemSelector : '.item',
石工： { 列宽：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">

【讨论】：

谢谢！我认为在使用本地主机测试站点并与它们一起生活时，我得到了所有细微差别。我已经弹出了我的临时内容，但是砌体仍然没有按照手册上说的那样运行。这就是我关于继承问题的问题所在......我已经看到一些提到需要一个 position:relative 的项目，但是在尝试了之后并没有看到任何结果，我怀疑我可能会遇到的任何其他问题失踪。

【解决方案2】：

看起来这绝对是一个继承问题。在重新格式化 Wordpress 附带的 TwentyTwelve 主题时（当前为发布日期），有许多因素（级联...hernt）流向我试图组织的项目。

使用此链接中的教程和指导：http://www.wplover.com/1818/tutorial-using-jquery-masonry-with-wordpress/

我能够将循环石板擦干净，并用新的 CSS 涂层擦洗到我需要控制的元素。

感谢@c-misura 的帮助！

【讨论】：