jQuery - Masonry layout

问题

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>

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

this is what it looks like

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.

回答1:

You should add a columnWidth:

$(window).ready(function() {
    $("#container").masonry({
          itemSelector: '.item',
          columnWidth: 240,
          isAnimated: !Modernizr.csstransitions
        });
});

Also, make sure that you have properly included both jQuery script and the masonry.js script.

And add the following CSS to your code:

.item{
    float: left;
    padding: 10px;
    margin: 10px;
}

来源：https://stackoverflow.com/questions/15710738/jquery-masonry-layout

标签

jquery

layout

jquery-masonry