jQuery - 砌體顯示沒有錯誤，但不工作？

我一直在嘗試超過7個小時才能獲得佈局排序，我希望最終產品能夠沿着這些方向發展 - - ！ want it to look like jQuery - 砌體顯示沒有錯誤，但不工作？

反而我得到這個！ currently looks like

繼承人正在使用

代碼這就是HTML -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<head> 

<title>_Box</title> 

<link href="styles.css" rel="stylesheet" type="text/css"> 

<body> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="masonry.js"></script> 
<script> 
    $(function(){ 
    $('#container').masonry({ 
    columnWidth: 150, 
    itemSelector: 'div' 
    }); 
}); 
</script> 

<div id="container" class="clearfix masonry"> 

<div class="item1"><img src="images/eventbox.png"></img></div> 
<div class="item3"><img src="images/forumbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item3"><img src="images/top10box.png"></img></div> 
<div class="item1"><img src="images/eventbox.png"></img></div> 

</div> 

</head> 
</body>

CSS -

html { 
    height:100%; 
} 

body { 
    width:900px; 
    height:100%; 
    margin:0 auto; 
    margin-top:100px; 
    background-image: url(images/gridbg.png); 
} 

#container { 
    width:900px; 
} 

.item1,.item2,.item3 {margin:5px;} 
.item1 {width:350px;} 
.item2 {width:175px;} 
.item3 {width:150px;}

任何想法？因爲它似乎什麼都不會工作

來源

2013-03-30 box

'$（ '＃集裝箱'）砌體（{ columnWidth時：150， itemSelector： 'DIV' }）;' – Jashwant

@Jashwant刪除最後一個逗號或舊版本的IE將拋出一個錯誤 – Andreas

這是一個錯字。我從來沒有這樣做，即使在PHP中:) – Jashwant

那麼這裏是我做的fiddle。

我注意到，通過放置低列寬數量，它改善了砌體的工作方式。

所以我修改了以股代息，以類似的東西：

$(function() { 
    $('#container').masonry({ 
     columnWidth: 1, 
     itemSelector: 'div' 
    }); 
});

此外，增加固定體重/身高可能的幫助。尤其是對於處理物品周圍的邊際，因爲砌體似乎在元素之間的邊距上存在一些問題。

因此，如果您的大件物品是350px，請確保物品不超過(350 -(2*margin)) /2 px，以便正確放置它們。。

來源

2013-03-30 21:31:02

jQuery - 砌體顯示沒有錯誤，但不工作？

回答

相關問題