Я использую 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; }
Кто-нибудь может помочь?
Спасибо!