与 Jquery Masonry 对齐作斗争

Question

我一直在与砌体作斗争。似乎它正在尝试做它的工作，但它没有正确对齐。我已经尝试修复它几个小时了。我在这里搜索，发现有同样问题的人，但解决方案对我不起作用。以下是全部代码：

<div id="container">
    <?php while (next_news()): ?>
<div class="newsitem">
<span class="newstitle"><?php printNewsTitleLink(); ?></span>
<span class="newsdate"><?php printNewsDate(); ?></span>
<span class="newscontent"><?php printNewsContent(); ?></span>
</div>    
    <?php endwhile; ?>
</div>

CSS 代码：

div.newsitem {
    width:215px;
    text-align:justify;
    margin:5px;
    padding:15px;
    float: left;
    font-size:12px;
    background-color:#FFF;
}

#container {
    display:inline-block;
}

这是脚本，我确实尝试为列指定宽度或更改 Gutterwidth，但没有任何效果：

我的脚本：-

<script>
$(function(){
$('#container').masonry({
itemSelector: '.newsitem'
});
});
</script>

这里包含的文件可以让一切正常工作：

<script src="<?php echo $_zp_themeroot; ?>/js/jquery-1.7.2.min.js"></script>
<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>

它应该在哪里工作：http://dagloos.com/lust/index.php?p=news 请帮助我，我将不胜感激。我正要为此拔头发。

Answer 1

我发现了问题所在！

<script src="<?php echo $_zp_themeroot; ?>/js/jquery.masonry.min.js"></script>

只需要放在花哨的盒子脚本之后。

Answer 2

首先，尝试放置

  $(function(){$('#container').masonry({ itemSelector: '.newsitem' }); });

里面

$(document).ready(function() {

函数，我认为它应该可以工作。

---

在黑暗中拍摄，但尝试替换：

div.newsitem {}

与

.newsitem{}

旁注：

<script type="text/javascript" src="/lust/themes/bottomline/js/jquery.fancybox-buttons.js"></script>

目前导致 404。

Answer 3

在控制台中，它清楚地表明它无法加载砌体。

TypeError: Object [object Object] has no method 'masonry'