jQuery砌體和WordPress

我正在嘗試將jQuery Masonry的WordPress庫放在一起，但它看起來不正確。jQuery砌體和WordPress

這是我的代碼：

<style type="text/css"> 
#container { 
} 
.item { 
    width: 200px; 
    float: left; 
    padding: 10px; 
    margin: 10px; 
    background: #D8D5D2; 
    font-weight: 300; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
</style> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="jquery.masonry.min.js"></script> 

<script> 
$(function(){ 
    $('#container').masonry({ 
    // options 
    itemSelector : '.item', 
    columnWidth : 240 
    }); 
}); 
</script>

這是HTML：

<div id="container"> 

<div class="item"><img src="1.JPG" width="200" /></div> 
<div class="item"><img src="2.JPG" width="200" /></div> 
<div class="item"><img src="3.JPG" width="200" /></div> 
<div class="item"><img src="4.JPG" width="200" /></div> 

... 
</div>

這是輸出：

Output http://f.cl.ly/items/1n370r413Y0f3z0s3W2x/output.png

我在做什麼錯？

來源

2012-08-10 Jessica

-2

，在我站出來的第一件事，立即被這條線：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

它應該是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

來源

2012-08-10 23:00:47 Edenbauer

那麼，'''可以 - 它相當於使用https或http，具體取決於用於加載頁面的內容。 – c2h5oh 2012-08-10 23:04:56

是的，不，這沒有做任何事情，但謝謝你告訴我這些。 – Jessica 2012-08-10 23:12:55

啊哈，今天我學到了新東西，謝謝@ c2h5oh。傑西卡，你是否試過[imagesLoaded]（http://masonry.desandro.com/demos/images.html）插件？ – Edenbauer 2012-08-10 23:26:24

我用磚石很久以前在我的WordPress網站和它出來很好，唯一的問題是我不確定代碼是什麼，因爲這是很久以前，該網站不存在了。嘗試將以下內容添加到您的CSS。

overflow:hidden;

來源

2012-08-11 03:21:25

另外，使#container溢出：隱藏以及看看你得到了什麼。 – 2012-08-11 03:23:28

那麼這是尷尬。顯然，jquery.masonry.min.js無處可查，當我將它添加到該文件夾時，它開始工作完美！謝謝大家的好意。

來源

2012-08-11 03:54:06 Jessica

jQuery砌體和WordPress

回答

相關問題