jQuery Masonry.js 格式不正确；问题是什么？

Question

看起来我做的一切都很好；但是，所有帖子似乎都出现在与该行中最高图片的高度相等的行中。

1234
1200
0200
5678
5008

相对于

1234
1256
7258
0008

该图片可能没有多大意义，所以我附上了屏幕截图...

http://i.imgur.com/Sj2i7EX.png

HTML

<!doctype html>
<html>
<head>

    <meta charset='utf-8'>
    <title>Masonry Testing</title>
    <link rel='stylesheet' type='text/css' href='css/main.css' />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>

    <div id="grid">    
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
    <script src="js/app.js"></script>

    <script>
        jQuery(document).ready(function($){
          $("#grid").masonry({
            itemSelector: ".grid-item"
          });
        });
    </script>

</body>
</html>

JavaScript

$.getJSON(
  "http://www.reddit.com/r/pics.json?jsonp=?",
  function foo(data)
  {
    $.each(
      data.data.children.slice(0, 50),
      function (i, post) {

        $("#grid").append( "<div class='grid-item'>" );
        $("#grid").append( "<img src='" + post.data.url + ".jpg' />" );
        $("#grid").append( "<div class='post-title'>" + post.data.title +"</div>" );
        $("#grid").append( "<div class='post-info'>");
        $("#grid").append( "<div class='upvotes'>
                            <span><i class='fa fa-arrow-up'></i> " + 
                            post.data.ups + "</span></div>" );
        $("#grid").append( "<div class='comments'>
                            <span><i class='fa fa-comments'></i> " + 
                            post.data.num_comments + "</span></div>" );
        $("#grid").append( "<div class='sourcebtn'><span>View on Reddit</span></div>" );
        $("#grid").append( "</div>" );
        $("#grid").append( "</div>" );

      }
    )
  }
)

我的 JavaScript 代码可以正常工作——格式变得很愚蠢，因为 Whosebug 希望我的代码比我希望的更整洁。

我的问题主要是：Masonry.js哪里出错了？为什么不能正确堆叠段？

Answer 1

问题可能是 jQuery(document).ready() 在 $.getJSON 异步请求完成之前触发，因此 Masonry 在空 div 上被激活。我会尝试将您的 Masonry 初始化代码移动到 $.getJSON 回调的末尾：

$.getJSON(
  "http://www.reddit.com/r/pics.json?jsonp=?",
  function foo(data)
  {
    $.each(
      data.data.children.slice(0, 50),
      function (i, post) {
        // Add your divs
      }
    )
    $("#grid").masonry({
      itemSelector: ".grid-item"
    });
  }
);

Answer 2

jQuery 的 .append(html) 功能与您使用它的方式不同。例如：

$("#grid").append( "<div class='grid-item'>" );
// Step 1: Find `#grid` element
// Step 2: Convert "<div class='grid-item'>" to DOM Elements
// Step 3: Append new DOM Elements to `#grid` element

所以执行以下操作：

$("#grid").append("<div>");
$("#grid").append("<img src='someurl'>");

将导致

<div></div>
<img src='someurl' />

而不是

<div>
    <img src='someurl' />
</div>

一种解决方案是将您的追加简单地写成一条语句：

$("#grid").append( 
    "<div class='grid-item'>"
    + "  <img src='" + post.data.url + ".jpg' />"
    + "  <div class='post-title'>" + post.data.title +"</div>"
    + "  <div class='post-info'>"
    + "    <div class='upvotes'>"
    + "      <span><i class='fa fa-arrow-up'></i> " 
    +          post.data.ups 
    + "      </span>"
    + "    </div>"
    + "    <div class='comments'>"
    + "      <span><i class='fa fa-comments'></i> " 
    +          post.data.num_comments 
    + "      </span>"
    + "    </div>"
    + "    <div class='sourcebtn'><span>View on Reddit</span></div>"
    + "  </div>"
    + "</div>" );

jQuery Masonry.js 格式不正确；问题是什么？

jQuery Masonry.js not formatting correctly; what is the issue?

javascript

jquery

jquery-masonry

masonry