0
我剛剛開始,所以我不知道爲什麼這不起作用,但我正在嘗試使用jQuery砌體。這似乎工作在FF但不是IE9?jquery砌體不工作ie9:初學者
標記
<div id="content-wrapper">
<div>Here Goes..</div>
<div id="list">
<div class="tile" style="height: 14em;"></div>
<div class="tile" style="height: 26em;"></div>
<div class="tile" style="height: 8em;"></div>
<div class="tile" style="height: 14em;"></div>
<div class="tile" style="height: 8em;"></div>
<div class="tile" style="height: 18em;"></div>
<div class="tile" style="height: 16em;"></div>
<div class="tile" style="height: 12em;"></div>
</div>
</div>
CSS:
body
{
background-color: #545e5d;
padding: 3.75em 1.875em;
}
strong
{
font-weight: 700;
}
h1
{
font-size: 1.625em;
font-style: italic;
letter-spacing: -0.1em;
text-align: center;
margin-bottom: 1.875em;
}
h1,
h1 a
{
color: #fff;
color: rgba(255, 255, 255, .5);
}
h1 a:hover
{
color: #fff;
}
#wrapper
{
max-width: 60em;
margin: 0 auto;
}
#list
{
width: 103.125%;
overflow: hidden;
margin-left: -1.562%;
margin-bottom: -1.875em;
}
.tile
{
width: 30.303%;
background-color: #fff;
background-color: rgba(255, 255, 255, .5);
float: left;
margin: 0 1.515% 1.875em;
background-color:#353535;
}
@media only screen and (max-width: 40em)
{
.tile
{
width: 46.876%;
margin-bottom: 0.938em;
}
}
@media only screen and (max-width: 20em)
{
#list
{
width: 100%;
margin-left: 0;
}
.tile
{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
JS:
$(window).load(function()
{
var columns = 3,
setColumns = function() { columns = $(window).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; };
setColumns();
$(window).resize(setColumns);
$('#list').masonry(
{
itemSelector: '.item',
columnWidth: function(containerWidth) { return containerWidth/columns; }
});
});
正如我說我剛學這個,不知道是什麼我失蹤。我發現這個概念here。
讚賞。
編輯:對不起,錯字。這似乎並沒有在IE9中的工作,但我已經讀過它的假設,並提供演示網站,我可以讓它在IE9中工作。如果我查看他的源代碼,有一個額外的ie.js正在進行,我想知道是否還有其他東西,我不知道要在IE9中使用石工。我想,因爲這是一個jQuery插件它已經不應該?試圖理解這一點。
應該澄清,道歉:通過不工作我的意思是假設divs居中,甚至寬度在任何一方,然後迴應。當我在IE中打開時,無論屏幕大小如何,所有div都在左側水平。
有什麼問題? – Chanckjh
'$('#list').masonry('您正在選擇'id',但沒有#list id? – Chanckjh
是的。 – Justin