jQuery получить ширину поста, чтобы исправить при бесконечной прокрутке? - PullRequest
Новая
       1

jQuery получить ширину поста, чтобы исправить при бесконечной прокрутке?

0 голосов
/ 01 апреля 2012

Джеймс здесь. Этот вопрос относится (вроде) к тому, который я опубликовал чуть ранее. В итоге (наконец-то) я получил рабочий скрипт, который работает с шириной 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

Ответы [ 2 ]

1 голос
/ 01 апреля 2012

Вам нужно поместить свой .css джаз в его собственную функцию, а затем создать его экземпляр прямо перед анимацией для прозрачности: 1.

@ Александр тоже может быть прав насчет использования .filter на $ newElements. Вы должны сделать 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 );
  });
});
0 голосов
/ 01 апреля 2012

Я думаю (без тестирования) это то, что вам нужно сделать: 

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