不渲染砌體布局
[英]Not rendering masonry layout
問題描述
我正在嘗試使用一些圖像構建一個砌體頁面。 這是我的代碼
CSS
<style>
.masonryImage{float:left;}
</style>
JavaScript的
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--<script src="<?=base_url('assets/js/bootstrap.min.js')?>"></script>-->
<script src="<?=base_url('masonry/masonry.min.js')?>"></script>
<script src="<?=base_url('masonry/masonry.js')?>"></script>
<script type="text/javascript">
var container = $('#container');
container.imagesLoaded( function(){
container.masonry({
itemSelector : '.masonryImage'
});
});
</script>
HTML
<body id="container" style="height:100%;width:100%;background-color:#309be9;">
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Playing-fetch.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Polar-bear.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-precious.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-baby-penguin.....jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-And-just-because-well-just-because-we-CAN.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Bunnies-and-flowers...jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-captionme.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Its-mum-is-called-Alinga..jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Curious-bobcat-cub-by-Megan-Lorenz.jpg" alt="">
</div>
</body>
我知道錯誤的位置，頁面沒有以mansory樣式呈現。
請建議。
更新：
在嘗試了兩個建議的javascripts之后，圖像開始重疊。 實際上代碼本身並不對此負責。 但是砌築有問題。 這是屏幕截圖如果您注意到我用紅色標記突出顯示，它會顯示一些圖像並隱藏!!
啊，這是和我一起玩的
如果我嘗試檢查元素，圖像將返回其位置
太過困惑了
2 個解決方案
解決方案1
1 2013-11-28 07:58:00
檢查你的js是否被正確調用。
使用masonry.min.js或masonry.js如果你正在部署，最好使用masonry.min.js 。
要檢查您的js是否被正確調用，請查看源並打開js鏈接或在js中放置一個簡單的警報。
編輯：您似乎使用imagesloaded ，它不是mansory的一部分，但可以與mansory一起使用。 如果要啟動砌體，則必須更換代碼
$( document ).ready(function() {
$('#container').masonry({
columnWidth: 200,
itemSelector: '.item'
});
});
或者使用當前代碼，您必須添加imagesloaded.js
解決方案2
1 已采納 2013-11-28 08:06:01
我沒有在你的代碼中看到Masonny的初始化：
$(document).ready(function (){
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.masonryImage'
});
})
砌體布局的css對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.