图像堆叠不正确

Question

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

问题是帖子/图像之间的空白/间隙太大。

我该如何解决这个问题？

谢谢，

费萨尔

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>

Answer 1

JSfiddle会很好，也可以尝试使用

$(window).load(function() {

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

$(document).ready(function()

不起作用，但是（function（）位是我首先尝试的那个。你也可以“弄乱”gutterWidth（砌砖）。

UPDATE：

我已经分配了你制作的jsfiddle，清理了一些代码（很多冗余的javascript等）并让它工作。我已经使用了砌筑等方面的建议，但应该有意义。查看工作版本的小提琴：http://jsfiddle.net/8KHAh/11/

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

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

Answer 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控制台来检查语法错误;它本身有助于弄清楚什么是错的。

Answer 3

我不熟悉砌体，但我证明你有8px的边距和6px的填充。我会先尝试减少那些，可能是两三个像素。如果那不能给我任何东西，我会在该课程中添加一个边框，并确切地知道它正在影响什么