Question

詹姆斯在这里。这个问题与我之前发布的那个问题有关。我最终（最终）获得了一个与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

Answer 1

你需要把你的.css爵士乐放入它自己的函数中，然后在不透明度的动画之前实例化它：1。

@Alexander也可能在$ newElements上使用.filter。你应该做一个console.log（$ newElements）;看看他们是如何打包的。

无论如何，不考虑优化或最佳实践，以下内容应该有效（仅使用一个$（function（）{}）;）：

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

Answer 2

我认为（没有测试）这就是你需要做的事情：

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

jQuery得到帖子宽度来修复无限滚动？

2 个答案: