1

初めてjqueryを使用し、基本的な石積みスタイルを機能させようとしています.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ファイルの以下...

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;
}

チュートリアルにほぼ従ったが、機能していないので、どんな助けも素晴らしいでしょう

これはそれがどのように見えるかです

http://i47.tinypic.com/2jfdr7n.jpg

それが役立つ場合は、画像の幅と高さが異なります。

質問: どうすれば、石工が行うべきレイアウトを得ることができますか? 石工サイトの例。

4

1 に答える 1

1

jQuery Masonry の例では、ラッパー用に追加の CSS が定義されています。

別の CSS 定義を試しましたか? ページ上のオブジェクトの寸法を取得するために、高さと幅のプロパティを探している可能性があります。

また、あなたが持っているようなウィンドウではなく、ドキュメントの準備ができている状態で実装を確認することをお勧めします: $(window).ready(function() {>>>$(document).ready(function() {

Masonry のサイトからソースを確認してください。ここにあるものとは明らかに異なり、firebug などを使用してデバッグします。

    var $items = $( items.join('') );
    $items.imagesLoaded(function(){
      $container
        .masonry( 'remove', $loadingItem ).masonry()
        .append( $items ).masonry( 'appended', $items, true );
    });
于 2013-03-29T22:57:44.313 に答える