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 jazz 放到它自己的函数中，然后在 opacity: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 );
  });
});
于 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 回答