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代码完全有效 - 格式化很愚蠢，因为StackOverflow希望我的代码比我更倾向于使用它。

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

Answer 1

问题可能是$.getJSON在div异步请求完成之前触发，因此在空$.getJSON上激活了Masonry。我会尝试将您的Masonry初始化代码移动到$.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" }); } );回调的末尾：

{{1}}

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格式不正确;问题是什么？

2 个答案: