Scroll infinito

alvaro0022 · #1 (**permalink**) 31/01/2015, 16:28

Saludos;

Estoy diseñando una App para androido obteniendo el contenido de esta de un sitio web mediante json.

Necesito que la App tenga scroll infinito, las imágenes están en una tabla, <li></li> lo que necesito es un scrip o un plugin que me muestre las primeras 10 filas o líneas y una vez que llegue al final de scroll cargue las siguientes 10 lineas y asi sucesivamente hasta cargar toda la tabla.

Alexis88 · #2 (**permalink**) 31/01/2015, 18:31

Yo suelo aplicar esto:

Código Javascript:

Ver original$(window).scroll(function(){
    var a = $(window).scrollTop(), //Posición del scroll vertical
        b = $(document).height(), //Altura del documento
        c = $(window).height(), //Altura de la ventana
        d = b - c;
    if (a == d){
        //Realizo la carga de los nuevos elementos
    }
});

Espero te sirva.

Saludos

alvaro0022 · #3 (**permalink**) 01/02/2015, 09:06

saludos alexis88

Logre hacer lo que quería mediante un plugin, pero tengo un problema, no se mucho de java. El sctipt genere el scroll infinito, pero se vuelven a cargar las 10 primeras imágenes o entradas.

Creo que el error esta en esta línea

Código:

 path: function(page) {
         return 'http://www.picalls.com/?json=get_posts&count=10';
    }

que indica que cuandeo el scroll llegue al final vuelva a cargar las 10 entradas, se puede hacer que se sumen 10 a

Código:

count=10

para asi mostrar las 10 siguientes?

código

Código:

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>infinitescroll</title>
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="lib/reset.css">
    <link rel="stylesheet" href="lib/waterfall.css">
    <script src="lib/jquery.js"></script>
    <script src="lib/handlebars.js"></script>
    <script src="lib/waterfall.min.js"></script>
</head>
<body>
<div id="header">
    <h1>infinitescroll</h1>
</div>
<div id="container"></div>
<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#posts}}
    <div class="item">
        <img src="{{thumbnail}}" width="{{width}}" height="{{height}}" />
    </div>
{{/posts}}
</script>
<script>
$('#container').waterfall({
    itemCls: 'item',
    colWidth: 222,  
    gutterWidth: 15,
    gutterHeight: 15,
    checkImagesLoaded: false,
    path: function(page) {
         return 'http://www.picalls.com/?json=get_posts&count=10';
    }
});
</script>


</body>
</html>