jQuery的 - 磚石佈局問題

使用jQuery和IM試圖得到基本砌築風格的工作，我有我的HTML下面的代碼第一次......jQuery的 - 磚石佈局問題

<!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 src="jquery.js"></script> 
<script src="masonry.js"></script> 
<script> 
$(window).ready(function() { 
    $("#container").masonry({ 
      itemSelector: '.item', 
      columnWidth: 240, 
      isAnimated: !Modernizr.csstransitions 
     }); 
}); 
</script> 

<div id="container"> 

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

</div> 

</body> 
</head>

和我的CSS以下文件...

html { 
    height:100%; 
} 

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

.item{ 
    float: left; 
    padding: 5px; 
    margin: 5px; 
}

爲香港專業教育學院幾乎跟着教程但它不工作

這是它看起來像

0任何幫助將是巨大的

http://i47.tinypic.com/2jfdr7n.jpg

如果有幫助，圖像是不同的寬度和高度。

問題：我如何得到砌體應該做什麼的佈局，那就是很好地流入另一個;磚石網站上的例子。

來源

2013-03-29 box

您應該結束正文前的元素。除此之外，你的代碼對我來說看起來不錯。你檢查了網絡標籤和控制檯嗎？也許有錯誤，或者你的masonry.js –

網絡沒有問題，控制檯說在masonry中有一個語法錯誤 - 對象沒有方法'masonry'，相信它是這部分$（「＃container」）.masonry（{---任何想法？ – box

你是否已經完成了Xeano提出的建議並修復了無效的HTML？ – Codasaurus

在jQuery Masonry示例中，它爲包裝器定義了額外的CSS。

您是否嘗試過不同的CSS定義？它可能正在查找高度和寬度屬性以獲取頁面上對象的測量值。

我也建議檢查與文檔的實現做好準備，而不是窗前，彷彿你有什麼： $(window).ready(function() { >>>$(document).ready(function() {

退房從砌體網站源。這絕對不同於你在這裏，然後使用螢火蟲或類似的東西進行調試。

var $items = $(items.join('')); 
    $items.imagesLoaded(function(){ 
     $container 
     .masonry('remove', $loadingItem).masonry() 
     .append($items).masonry('appended', $items, true); 
    });

來源

2013-03-29 22:57:44 Ligemer

jQuery的 - 磚石佈局問題

回答

相關問題