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

我在使循环与jquery Isotope模块的经典Masonry样式布局对齐方面遇到麻烦。

所有浏览器都可以在控制台中正常加载脚本，但是属性根本无法正常运行。 .item类div元素的对齐方式在左侧的所有位置，并水平堆叠。

Wordpress是否有某种继承功能使其无法正常工作？我正在尝试使用默认的TwentyTwelve主题（没有其他插件）来实现wordpress的功能，但该主题位于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

最佳答案

我想您要打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">

关于javascript - jQuery Isotope不应用布局。继承问题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16363265/