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