砌體不與動態內容

砌體不與我的動態內容，我不知道爲什麼。我認爲這不是我身邊的一個bug，至少我現在已經看了幾個小時的代碼，並且找不到任何不工作的東西。砌體不與動態內容

//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 = '' + '<div class="box" id="' + id + '">' + '<div class="boxinfo">' + '<label class="boxname"><a href="' + link + '" class="boxlink" target="_blank">' + name + '</a></label>'; 

    $.each(tags, function (i, tag) { 
     tagsHtml += '<label class="boxtag">' + ((!tag.name) ? tags[i] : tag.name) + '</label>'; 
    }); 

    //if(description.trim().length > 0){ 
    descriptionHtml = '<textarea class="boxdescription" readonly rows="1">' + description + '</textarea>'; 
    //} 

    boxHtml += tagsHtml + '</div>' + descriptionHtml + '</div>'; 

    $content.html($content.html() + boxHtml); 
}

下面是簡單的HTML：

<!DOCTYPE html> 
<html> 

    <head> 
     <link rel="stylesheet" type="text/css" href="_css/index.css" /> 
     <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' 
     type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' 
     type='text/css'> 
     <script src="_resources/jquery-2.0.3.min.js" type="text/javascript" language="javascript"></script> 
     <script src="_resources/masonry.pkgd.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
      $('#content').masonry(); 
     </script> 
    </head> 

    <body> 
     <div id="content" class="js-masonry"></div> 
    </body> 

</html>

我知道，我不需要對內容的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; 
}

我真的瘋了所有它，因爲我測試了創造boxe （這意味着寫在HTML）的內容，如果我做石工工作正常。如果我通過你在那裏看到的函數創建它們，那麼它不起作用...我在javascript文件的開始部分調用listboxs之後，我宣佈了所有的變量...

希望我很清楚，你可以幫我。

來源

2013-08-27 InquiSab

您應該使用appended方法。 From docs：

添加和佈局新添加的項目元素。

看這個jsfiddle

試圖改變你的代碼

boxHtml += tagsHtml + 
     '</div>' + 
    descriptionHtml + 
'</div>'; 

var $boxHtml = $(boxHtml); 

$content.append($boxHtml).masonry('appended', $boxHtml);

來源

2013-08-28 08:18:53 Grin

這確實奏效，但砌體似乎並沒有真正應用我猜。這些div放置不正確，它們略微重疊在一起。我已經測試過將$ content.masonry（）應用於該操作點擊一個按鈕，然後將它們正確放置。任何想法？我還在listBoxs（）中的每個循環之後放置了一個$ content.masonry（），但沒有任何反應。有趣的是，如果我只是放大/縮小我的頁面，然後它正確地放置div。 – InquiSab

你的箱子裏有圖像嗎？或者你可能會對它們應用一些java腳本轉換（如統一等）？砌體使用基於物品尺寸的絕對定位。所以如果大小稍微改變，會導致重疊。閱讀更多[here]（http://masonry.desandro.com/faq.html#overlapping）。 – Grin

加起來眉開眼笑的回答是：

還應該應用數據磚石選項='{「 columnWidth「：200，」itemSelector「：」.item「}'到你的#container。

<div id="content" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'></div>

像這樣。它可能有助於您的評論迴應。我沒有代表作爲評論回答。

來源

2013-08-28 10:03:48 FPJ

這似乎工作，但如果我改變寬度來說50它仍然有效，但60不。儘管如此，砌體行爲真的很奇怪。 – InquiSab

砌體不與動態內容

回答

相關問題