0

ジェームスがここに。この質問は、私が少し前に投稿したものに関連しています。最終的に（最終的に）jQueryの幅で動作するスクリプトを取得しましたが、無限スクロールで新しい投稿が読み込まれると動作しません。私が使用しているスクリプトは次のとおりです。

<script type="text/javascript">
        $(function() {
            var cwidth = $(document).width() - 150;
            var pwidth = cwidth - 120;
            var ewidth = (pwidth - 150) / 5;
            var twidth = ewidth - 30;
            var awidth = ewidth - 30;
            $("#container").css("width", cwidth);
            $("#posts").css("width", pwidth);
            $(".entry").css("width", ewidth);
            $(".text").css("width", twidth);
            $(".photo").css("width", ewidth);
            $(".audio embed").css("width", awidth);
        });
        $('p:has(a.tumblr_blog)').remove();
    </script>
    <script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
    <script src="http://static.tumblr.com/twte3d7/FkIlzxaul/infinitescroll.js"></script>
    <script type="text/javascript">
        $(function(){
            var $container = $('#posts');
            $container.imagesLoaded(function(){
                $container.masonry({
                    itemSelector: '.entry',
                });
            });

            $container.infinitescroll({
                navSelector  : '#page-nav', 
                nextSelector : '#page-nav a',
                itemSelector : '.entry',
                animate: true,
                loading: {
                    finishedMsg: 'No more pages to load.',
                    img: 'http://i.imgur.com/6RMhx.gif'
                }
            },
            function(newElements) {
                var $newElems = $(newElements).css({ opacity: 0 });
                $newElems.imagesLoaded(function(){
                    $newElems.animate({ opacity: 1 });
                    $container.masonry( 'appended', $newElems, true );
                });
            });
    });
</script>

すべてが実装されるようにするにはどうすればよい$(".entry").css("width", ewidth); $(".text").css("width", twidth); $(".photo").css("width", ewidth); $(".audio embed").css("width", awidth);ので、新しい投稿が無限スクロールで読み込まれると、投稿が適切な幅になりますか? 誰かがスクリプトを提供できると本当に助かります。ページの例: http://jamescharless.tumblr.com

4

2 に答える 2

1

.css ジャズを独自の関数に入れ、不透明度 1 のアニメーションの直前にインスタンス化する必要があります。

@Alexander は、$newElements で .filter を使用することについても正しいかもしれません。console.log( $newElements ); を実行する必要があります。それらがどのようにパッケージ化されているかを確認します。

とにかく、最適化やベストプラクティスについて考えなくても、次のように動作するはずです ( $(function(){}); を 1 つだけ使用します):

var $container = $('#posts');
$container.imagesLoaded(function(){
  $container.masonry({ itemSelector: '.entry' });
});

var cssFix = function()
{
  var cwidth = $(document).width() - 150;
  var pwidth = cwidth - 120;
  var ewidth = (pwidth - 150) / 5;
  var twidth = ewidth - 30;
  var awidth = ewidth - 30;
  $("#container").css("width", cwidth);
  $("#posts").css("width", pwidth);
  $(".entry").css("width", ewidth);
  $(".text").css("width", twidth);
  $(".photo").css("width", ewidth);
  $(".audio embed").css("width", awidth);
}
cssFix();

$container.infinitescroll({
  navSelector  : '#page-nav', 
  nextSelector : '#page-nav a',
  itemSelector : '.entry',
  animate: true,
  loading: {
    finishedMsg: 'No more pages to load.',
    img: 'http://i.imgur.com/6RMhx.gif'
  }
},
function(newElements) {
  var $newElems = $(newElements).css({ opacity: 0 });
  $newElems.imagesLoaded(function(){
    cssFix();
    $newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
  });
});
于 2012-03-31T22:39:02.400 に答える
0

私は（テストなしで）これがあなたがする必要があることだと思います：

$container.infinitescroll({
  ...    
},
function(newElements) {
  var $newElements = $(newElements);
  var cwidth = $(document).width() - 150;
  var pwidth = cwidth - 120;
  var ewidth = (pwidth - 150) / 5;
  var twidth = ewidth - 30;
  var awidth = ewidth - 30;
  $newElements.filter(".entry").css("width", ewidth);
  $newElements.filter(".text").css("width", twidth);
  $newElements.filter(".photo").css("width", ewidth);
  $newElements.filter(".audio embed").css("width", awidth);
  $("#posts").masonry('appended', $newElements);
});
于 2012-03-31T21:40:03.373 に答える