jQuery获取发布宽度以修复无限滚动？

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）;看他们是如何被包装的。

不管怎么说，不假思索优化或最佳实践，下面应该工作（只使用一个$（函数（）{}）;）：

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