0

我无法让循​​环与 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

4

2 回答 2

1

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

$( '#container' ).isotope({

itemSelector：'.item'，
砌体：{ 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">

于 2013-05-03T17:01:48.797 回答
0

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

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

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

感谢@c-misura 的帮助！

于 2013-05-04T18:35:14.037 回答