4

我正在使用 jquery masonry，并且无法正确堆叠图像/帖子（参见附图）。

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

我怎样才能解决这个问题？

谢谢，

费萨尔

索引.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>

在此处输入图像描述

4

3 回答 3

4

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以调整填充等。

于 2012-05-10T20:33:16.377 回答
1

我刚刚第一次看到 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 控制台检查语法错误；仅此一项就可以极大地帮助找出问题所在。

于 2012-05-10T20:08:55.627 回答
-1

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

于 2012-05-10T20:00:06.723 回答