0

Masonry と ImagesLoaded を使用して、3 列の Tumblr レイアウトを作成しようとしています。ただし、フォトセットが重複しているという問題があります。私もPXUフォトセットを使っています。

問題：

最初の数秒間、ブログは壊れているように見えます: http://s11.postimg.org/ry4fa614j/Overlapping.jpg

次に、ソートされた列に修正します: http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg

また、重複はフォトセットの投稿でのみ発生します。他のタイプの投稿 (画像が 1 つしかないものも含む) は正常に機能します。

私のコード:

これまでのところ、これは私にとって最もうまく機能するコードですが、前に述べた問題を引き起こします。

var $container = $('#threeCol');

$container.masonry({
      itemSelector: ".post",
      transitionDuration: 0
    });

$(document).ready(function(){
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '0px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'}, function () {
          $container.imagesLoaded(function(){
            $('#threeCol').masonry({
                percentPosition: true,
                columnWidth: '.post',
                itemSelector: '.post',
                gutter:20,
                resize: true
            },
            function() { 
                $('#threeCol').masonry({ 
                    appendedContent: $(this) 
                }); 
            });
        }).resize();

        $('.post img').imagesLoaded(function() {
            $('#threeCol').masonry({
                percentPosition: true,
                columnWidth: '.post',
                itemSelector: '.post',
                gutter:20,
                resize: true
            }).resize();
        });

    });
});

ここで、threeColはコンテナで、postはグリッドに合わせたい個々の投稿です。

また、私はInfiniteScroll を使用していません。

ゴール：

コンテンツの読み込みが速く、読み込みの最初の数秒で壊れたように見えないようにしたいと考えています。

私はすでに試しました：

私はこの問題に何日も取り組んできたので、すでにいくつかのことを試みました。

$(window).load(...);

これは、現在のコードではまったく機能しません。そして、それが機能するとき、それは非常に遅く、ユーザーエクスペリエンスは悪い.

解決策を含む他の投稿については、次のような多くのことを試しました。

そして、GitHub の他のものと、私が再び見つけられないリンク。

私の質問を読んでくれてありがとう。どんな助けでも大歓迎です!

編集：

私の質問は、個々の画像ではなくフォトセット (同じ投稿に含まれる 2 つ以上の画像のグループであるため、同じグリッド要素の一部です) であるため、以前のいくつかの質問とは異なります。また、各フォトセットに何枚の画像が含まれているかもわかりませんし、それらのサイズもわかりません。

フォトセットは、Tumblr 内の投稿の一種です。

4

0 に答える 0