砌体不使用动态内容

砌体不能处理我的动态内容，我不知道为什么。 我不认为这是我身上的一个错误，至少我现在看了几个小时的代码，我找不到任何不起作用的东西。

//reads listbox.php and cycles through the array calling createbox function listboxs() { $.ajax({ url: '_php/listbox.php', success: function (output) { var jsonArray = $.parseJSON(output); $.each(jsonArray, function (i, box) { createbox(box.id, box.name, box.link, box.description, box.tags); }); } }); } //create the code for 1 box function createbox(id, name, link, description, tags) { var boxHtml = "", tagsHtml = "", descriptionHtml = ""; boxHtml = '' + '
' + '
' + '' + name + ''; $.each(tags, function (i, tag) { tagsHtml += '' + ((!tag.name) ? tags[i] : tag.name) + ''; }); //if(description.trim().length > 0){ descriptionHtml = '' + description + ''; //} boxHtml += tagsHtml + '
' + descriptionHtml + '
'; $content.html($content.html() + boxHtml); } 

以下是简化的HTML：

          $('#content').masonry();    
   

我知道我不需要在内容上使用内联javascript调用砌体，但这是我的众多测试之一……

以下是CSS的一部分：

 #content{ padding: 15px; min-height: 400px; } /* ################################ box */ .box{ border: 1px solid black; float: left; padding: 5px; background: #F0F0F0; margin-left: 5px; margin-bottom: 5px; } .boxinfo{ border-bottom: 1px solid black; } .boxname{ font-weight: bold; } .boxdescription{ border: none; outline: none; background: white; overflow: hidden; } .boxtag{ margin-left: 5px; } #boxdecoy{ height: 45px; } .boxname, .boxtag, .boxdescription{ font-family: 'Rosario', sans-serif; font-size: 12px; } .boxlink{ text-decoration: none; color: black; } .boxlink:hover{ text-decoration: underline; } 

我真的很疯狂，因为我测试了手工创建盒子（这意味着在html中写入）内容，如果我做砌体工作正常。 如果我通过您在那里看到的function创建它们它不起作用…我在javascript文件的开头就调用了列表框，我宣布了所有的变量…

希望我很清楚，你可以帮助我。

Answer 1

你应该使用appended方法。 来自docs ：

添加并布置新添加的项元素。

看看这个jsfiddle

尝试将代码更改为

 boxHtml += tagsHtml + '' + descriptionHtml + ''; var $boxHtml = $(boxHtml); $content.append($boxHtml).masonry('appended', $boxHtml); 

Answer 2

加上Grin的答案：

您还应该将data-masonry-options ='{“columnWidth”：200，“itemSelector”：“。item”}’应用于您的#container。

像这样。 它可能有助于您的评论回复。 我没有代表作为评论回答。