图像未正确堆叠答案

【问题标题】：Images not stacking properly图像未正确堆叠
【发布时间】：2012-05-10 19:52:28
【问题描述】：

我正在使用 jquery masonry，但无法正确堆叠图像/帖子（请参阅附图）。

问题是帖子/图像之间的空白/间隙过多。

我该如何解决这个问题？

谢谢，

费萨尔

INDEX.HTML.ERB

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/assets/jquery.js"></script>
<script src="/assets/jquery.masonry.min.js"></script>
<style>
  .item {
   width: 200px;
   margin: 8px;
   float: left;
   border: 1px solid #999999; 
   background-color: #F7F7F7; 
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   padding: 6px;
   color: black;
   }

</style>
<div id="container">
<br />
<br />
<br />
<% @posts.each do |post| %>
<div class="item">
<%= post.body %>
<br />
<%= post.title %> 
<br />
<i>RSVP -- <%= post.job %>.</i>
<br />
<i>Created <%= time_ago_in_words(post.created_at) %> ago.</i>
</div>
<script type="text/javascript">

$(window).load() { 
$('#container').masonry({
  itemSelector: '.box',
  columnWidth: function( containerWidth ) {
  return containerWidth / 5;
  });
});
</script>
<% end %>
</div>

【问题讨论】：

用您的实际 HTML 而非 ERB 模板更新您的问题
为@MichaelRobinson +1； JSFiddle 也会有所帮助。
谢谢大家-这是 jsfiddle 页面链接：jsfiddle.net/HSK8E 如果有帮助，请告诉我..

标签： jquery css jquery-masonry

【解决方案1】：

JSfiddle 会很好，也可以试试

$(window).load(function() {

正如 egasimus 指出的那样......

$(document).ready(function()

不起作用，但 (function() 位是我首先要尝试的。您也可以“摆弄”gutterWidth（砌体）。

更新：

我已经分叉了您制作的 jsfiddle，清理了一些代码（大量多余的 javascript 等）并让它工作。我已经在砖石等方面使用了这些建议，但应该是有道理的。查看小提琴的工作版本：http://jsfiddle.net/8KHAh/11/

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 226
  });
});

确保使用类似的 CSS 或调整 columnWidth 以调整填充等。

【讨论】：

刚刚看到你的编辑，试了一下，效果很好！！！你刚刚完成了我的一周。我花了 20 多个小时试图修复它。谢谢！！！！
非常感谢您的投票。我终于在堆栈中有足够的积分有用了:)

【解决方案2】：

我刚刚第一次看到 jQuery Masonry，从它的样子来看，也许插件根本没有运行？当我的代码中有语法错误时，这通常会发生在我身上。你的 JS 看起来有点粗略，而且，嗯......明白了！使用这个：

$(function() {
  $('#container').masonry({
    itemSelector: '.box',
    columnWidth: function( containerWidth ) {
      return containerWidth / 5;
    }
  });
});

这是必须的。

这就是为什么适当的缩进很重要 - 如果你有它，问题（和解决方案）对你来说几乎是显而易见的。首先，你打电话给：

$(window).load() { /* your code goes here */ }

这是两个完全独立的语句，几乎相同：

$(window).load(); /* your code goes here */

您需要将匿名函数作为参数传递给.load()，如下所示：

$(window).load ( function() { /* your code goes here */ } )

此外，在定义 columnWidth 函数之后，您的设置对象中有一个分号——就像您输入了一样

{
   name1: 'value1',
   name2: 'value2'; // <-- SYNTAX ERROR
   name3: 'value3', // it's okay to leave a trailing comma, though
}

那个也总是能引起我的注意，但是通过适当的缩进更容易看到。

结论：自学良好的缩进。此外，使用浏览器的 JS 控制台 检查语法错误；仅此一项就可以极大地帮助找出问题所在。

【讨论】：

JS 错误现已修复，但原来的问题 - 帖子之间的空白过多 - 仍然存在。我的屏幕仍然看起来像上面发布的屏幕截图。我该怎么办？
@hikmatyar 我想 JS 控制台也没有说什么？好吧，我发布的内容是我可以从您提供的内容中扣除的内容；我们可能需要您的代码的JSFiddle 来弄清楚其他所有内容。
我添加了 jsfiddle；您还可以在 www.faisalandsamreen.com/posts 上查看实时网站
是的，JS 控制台给了我以下错误：Uncaught TypeError: Object [object Object] has no method 'on'
看看你的 JS，不太清楚你在做什么，但似乎你可能已经注释掉了你的 jQuery？此外，错误消息表明您的脚本正在尝试使用 .on() 方法，该方法直到 jQuery 1.7 才存在 -- 尝试使用最新版本？

【解决方案3】：

我不熟悉砌体，但我向您展示了 8 像素的边距和 6 像素的填充。我会首先尝试减少那些，可能是两个或三个像素。如果那没有给我任何东西，我会为该类添加一个边框，并找出它到底影响了什么

【讨论】：