jQuery-砌体布局 [英] jQuery - Masonry layout
问题描述
第一次使用jquery和即时消息尝试使基本的砌体样式起作用，我在html中获得了以下代码...
First time using jquery and im trying to get the basic masonry style to work, i've got the following code in my html...
<!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文件中的以下内容...
and the following in my css file...
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;
}
任何帮助都将是非常有用的，因为我已经按照教程进行了操作，但仍无法正常工作
any help would be great as ive pretty much followed the tutorial yet its not working
这是它的样子
如果有帮助，图像的宽度和高度将有所不同.
if it helps, the images are different widths and height.
问题:我该如何将砌体布置得井井有条，好好彼此融为一体；砌石现场的例子.
Question: How do i get the layout to what masonry is supposed to do, that being flow into one another nicely; examples on masonry site.
推荐答案
您应该添加columnWidth:
$(window).ready(function() {
$("#container").masonry({
itemSelector: '.item',
columnWidth: 240,
isAnimated: !Modernizr.csstransitions
});
});
此外，请确保已正确包含jQuery脚本和masonry.js脚本.
Also, make sure that you have properly included both jQuery script and the masonry.js script.
并将以下 CSS 添加到您的代码中:
And add the following CSS to your code:
.item{
float: left;
padding: 10px;
margin: 10px;
}
这篇关于jQuery-砌体布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
