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
| <script>
(function ($){
var $tiles = $('#tiles'),
$handler = $('li', $tiles),
$main = $('#main'),
$window = $(window),
$document = $(document),
options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $main, // Optional, used for some extra CSS styling
offset: 22, // Optional, the distance between grid items
//itemWidth:200 // Optional, the width of a grid item
};
/*** Reinitializes the wookmark handler after all images have loaded */
function applyLayout() {
$tiles.imagesLoaded(function() {
// Destroy the old handler
if ($handler.wookmarkInstance) {
$handler.wookmarkInstance.clear();
}
// Create a new layout handler.
$handler = $('li', $tiles);
$handler.wookmark(options);
});
}
/**
* When scrolled all the way to the bottom, add more tiles
*/
var i = 10;
function onScroll() {
$.ajax({ url: 'mResults.php?rub=22&limit='+i,
data: {action: 'test'},
type: 'post',
success: function(output) {
$tiles.append(output);
}
});
i = i+10;
applyLayout();
};
// Capture scroll event.
$window.bind('scroll.wookmark', onScroll);
applyLayout();
})(jQuery);
</script>
<div id="next">Suivant</div> |
Partager