Discussion :

[keisersuze]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keisersuze]

Trouvé!

Il suffisait de mettre $container.width(isotope); dans le callback.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
// call Isotope as a callback
function( newElements ) {
	$container.isotope( 'appended', $( newElements ) );
	$container.width(isotope);
}