4

私はここスタック上の大量のメーソンリーの投稿をふるいにかけ、他の tumblr ブログを参照しましたが、何が欠けているのか認識できません。うまくいけば、あなたの一人が助けることができます.

問題のサイトは、ここで視覚的に参照できます (注: 1 つか 2 つのファッション水着の写真 - 飼いならされていますが、場合によっては NSFW になる可能性があります)。

ご覧のとおり、画像はまだ垂直方向に適切に積み重ねられていません。どこで間違ったのですか？

CSS

#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #000;
    height: 400px;

}

#wrapper .posts {
    background: #ff9900;
    width: 950px;
    position:relative;
    height:100%;
}

#wrapper .entry {
    width: 300px;
    float: left;
}

メーソンリー スクリプト

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>

<script type="text/javascript">

var $posts = $('.posts');

$posts.imagesLoaded( function(){
  $posts.masonry({
    itemSelector : '.entry',
    columnWidth: 300

  });
});

</script>
4

2 に答える 2

3

関数が定義されていないため、imagesLoadedエラーが発生しました。jquery.masonry.min.js にimagesLoaded プラグインがないようです。imagesLoaded を持っているように見える代わりに、この縮小された石工ソースのコピーを取得し、ドキュメントを参照してください

于 2012-04-13T09:07:05.837 に答える
3

ここで提供した Masonry スクリプトは問題ないようです (提供したリンクのスクリプトは正しくありません)。ドキュメントの下部、「body」の終了タグの直前に移動してみてください

...</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>

<script type="text/javascript">

var $posts = $('.posts');

$posts.imagesLoaded( function(){
$posts.masonry({
itemSelector : '.entry',
columnWidth: 300

 });
});

</script>

</body>
</html>
于 2012-04-13T08:49:07.640 に答える