2013-06-28 7 views
0

У любого из вас есть опыт использования Masonry.js и JQuery scrollPagination?Каменная кладка и scrollPagination

Изображения перекрываются после загрузки больше.

Check this website

Это в любом случае, чтобы исправить это?

+0

не ответ, но вы можете попробовать [Изотоп] (http://isotope.metafizzy.co). Это немного более умный брат масонства, и лично мне было проще настроить его и добавить к нему функциональность. – giorgio

ответ

0

Я использовал Masonry с Infinite Scroll plugin. его просто реализовать.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://dl.dropbox.com/u/33213779/jquery.masonry.min.js"></script&gt; 
<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js"></script&gt; 
<script> 
$(function(){ 
    var $grid = $('#posts'); 

    $grid.imagesLoaded(function(){ 
     $grid.masonry({ 
      itemSelector : '.item',  
      columnWidth: 250 
     }); 
    }); 

    $grid.infinitescroll({ 
     navSelector : '#footer', // selector for the paged navigation 
     nextSelector : '#footer a', // selector for the NEXT link (to page 2) 
     itemSelector : '.item',  // selector for all items you'll retrieve 
     loading: { 
     finishedMsg: 'No more pages to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
     }, 
     // 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 }); 
     $grid.masonry('appended', $newElems, true); 
    }); 
     } 
    ); 

    }); 
</script> 
Смежные вопросы