Isotop Responsive et Infinite scroll bug
Bonjour,
J'ai un problème avec une personnalisation responsive du script Isotop ci-dessous:
http://jsfiddle.net/schmidjon/6Z3sn/
A cette contrib ci-dessus, j'aimerais y ajouter la fonction infinit scroll issu du même plugin:
http://isotope.metafizzy.co/demos/infinite-scroll.html
Cela marche, seulement il oublie de rafraichir la taille de mes bloc responsive lorsque les nouveaux bloc (infinit scroll) apparaissent.
Merci au expert de jeter un coup d’œil. Je sèche complétement.
Je place le contenu de mon fichier JS ci-dessous.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| $(function(){
var $container = $('#container'),
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 1200) {
columnNum = 3;
} else if (w > 768) {
columnNum = 2;
} else if (w > 480) {
columnNum = 1;
}
columnWidth = Math.floor(w/columnNum);
$container.find('.element').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/w(\d)/),
multiplier_h = $item.attr('class').match(/h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-20 : columnWidth-20,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-20: columnWidth*0.5-20;
$item.css({
width: width,
height: height
});
});
return columnWidth;
},
isotope = function () {
$container.isotope({
resizable: false,
itemSelector: '.element',
masonry: {
columnWidth: colWidth(),
gutterWidth: 20
}
});
}; isotope();
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.element', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
$(window).smartresize(isotope);
}); |