1

我正在使用 Drupal Views 将带有这个无限滚动脚本的内容加载到砖石风格的项目网格中。

它无限滚动，但附加的项目不保留原始项目的 CSS 属性。我不太确定为什么会这样。

此外，我正在使用 jQuery 悬停效果在我的图像上“浮动”内容。这是非常简单的代码。我无法想象它对这个问题有任何影响，但这里以防万一：

悬停效果的jQuery

$j('div.blog-list').on(".blog-thumbs-animate").hover(function(){
    $j("img", this).stop().animate({opacity: 0.9},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0.9},{queue:false,duration:75});  
}, function() {
    $j("img", this).stop().animate({opacity: 1},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0},{queue:false,duration:75});        
});

用于砌体和无限滚动的 jQuery：

<script>
  (function($){

    var $container = $('.blog-list');

    $container.imagesLoaded(function($){
      $container.masonry({
        itemSelector: 'div.pmason',
        columnWidth: 320
      });
    }(jQuery));

    $container.infinitescroll({
      navSelector  : '.pager',    // selector for the paged navigation 
      nextSelector : '.pager-next a',  // selector for the NEXT link (to page 2)
      itemSelector : '.blog-list .node',     // selector for all items you'll retrieve
           animate : true,
      loading: {
          finishedMsg: 'No more pages to load.',
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  })(jQuery);
</script>

编辑：这是CSS

.blist .pmason { width:319px; margin-right:1px; margin-bottom:1px; background:#FFF !important;}
.blist .last { margin-bottom:1px !important; margin-right:1px !important; }
.blog-thumbs-animate { position:relative !important; }
.blist .bhover { opacity:0; background:#f4f4f4; width:319px; position:absolute; bottom:0; left:0; height:100% !important; }
.bhover .inside { padding:20px; }

任何人都可以帮忙吗？

谢谢！

4

2 回答 2

1

I don't know this infinite scroll plugin. But it appears that it creates new elements, and these new elements doesn't have the hover event listener.

So, I suggest you to do the hover event listener this way.

$j('div.blog-list').on("mouseenter",".blog-thumbs-animate", function (){

    $j("img", this).stop().animate({opacity: 0.9},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0.9},{queue:false,duration:75});  

}).on("mouseleave",".blog-thumbs-animate", function () {

    $j("img", this).stop().animate({opacity: 1},{queue:false,duration:75});
    $j(".bhover", this).animate({opacity: 0},{queue:false,duration:75});   

});

The difference between adding a event listener throught the on method to the hover method is that it do not append the event listener directly to the element, but to the selector. So even if you create new elements, this event listener will match the new elements.

More details here http://api.jquery.com/on/

于 2014-08-13T02:12:02.630 回答
0

好的，我想通了。我的问题最终出现在 HTML 中，这是我在原始问题中未能发布的一小段代码。

对于那些好奇的人，我的 HTML 最初看起来像这样：

<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>

对于任何正常目的，这是正确的代码。但是因为无限滚动在它自己的内部附加了新项目，所以我最终得到了更像这样的东西：

<div class="blog-list">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>

鲁鲁。你看到这里发生了什么吗？无限滚动已将自己置于我的博客列表类之外，即使我已指定使用该类。为了解决这个问题，我只是在 blog-list 的 INSIDE 上添加了一个额外的包装器，这样当无限滚动运行时，它就可以保持所有内容。

这是最终结果，现在它可以按预期工作！

<div class="blog-list">
<div class="inner">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
<div class="infinite-scroll">
<div class="pmason"></div>
<div class="pmason"></div>
<div class="pmason"></div>
</div>
</div>

非常感谢那些试图帮助我的人。对此，我真的非常感激。

于 2014-08-13T16:11:35.310 回答