Partager des conseils sur la mise en œuvre du flux en cascade avec jQuery_jquery

Analyse : Débit en cascade, il y a deux façons de le faire

(1) Schéma de positionnement absolu : chaque cellule est définie sur un positionnement absolu. Grâce au calcul, le haut et la gauche peuvent être définis respectivement

.

(2) Schéma flottant : créez une disposition en colonnes N (flottantes), puis insérez les données de l'image dans l'ordre. Par exemple, si N est composé de 3 colonnes, la première image est insérée dans la première colonne et la deuxième image est insérée. insérée dans la deuxième colonne, la troisième image est insérée dans la troisième colonne, et la quatrième image est insérée dans la première colonne... De cette façon, elle est insérée dans une boucle (ne peut pas être adaptative)

Code CSS et HTML :

Copier le code Le code est le suivant :

​corps,ul,li{margin:0;margin:0;}
ul{list-style:aucun;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*Cascade*/
.wallList{width:860px;}
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
.wallList li a:hover{border-color:#f60;}
.wallList li .name{display:block;text-align:center;padding:8px 0;}
.loadTips{text-align:center;padding:15px 0;}

Copier le code Le code est le suivant :

          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

Chargement...

En utilisant jQuery pour implémenter, l'idée générale est la suivante :

(1) Obtenez la plus petite valeur de hauteur dans la colonne N. L'API fournie par JS est Math.min(), mais cette API ne peut transmettre que 2 paramètres au maximum, vous devez donc utiliser aplly pour étendre Math.min . appliquer(null,[xxx,xxx,xxxx,xxxx]) (2) Liez l'événement scroll à la fenêtre et obtenez $(document).scrollTop() lors de l'extraction vers le bas. Lorsque $(document).scrollTop() est supérieur à la valeur de hauteur minimale, demandez l'URL avec ajax s'il y en a. données, accédez à la page. Insérez la structure HTML. S'il n'y a pas de structure HTML, cela affichera "Chargement terminé", puis la fenêtre dissociera cet événement

.

Copier le code

Le code est le suivant :

// 数据格式
    var testJson = {
        "statut":1,
        "données":[
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"nom":"图片1"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"nom":"图片2"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"nom":"图片3"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"nom":"图片4"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"nom":"图片5"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","width":240,"height":260,"nom":"图片6"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"nom":"图片7"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"nom":"图片8"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","width":240,"height":265,"nom":"图片9"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"nom":"图片10"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","width":240,"height":310,"nom":"图片11"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"nom":"图片12"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","width":240,"height":150,"nom":"图片13"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","width":240,"height":165,"nom":"图片14"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","width":240,"height":100,"nom":"图片15"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"nom":"图片16"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","width":240,"height":225,"nom":"图片17"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"nom":"图片18"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"nom":"图片19"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"nom":"图片20"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"nom":"图片21"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"nom":"图片22"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"nom":"图片23"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"nom":"图片24"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"nom":"图片25"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","width":240,"height":210,"nom":"图片26"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"nom":"图片27"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"nom":"图片28"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","width":240,"height":195,"nom":"图片29"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"nom":"Photo 30">
        ]
    >
    var wallPic = fonction(){
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
oTop = 0, //Valeur de jugement défilant
             ligne = 3,//Nombre de colonnes
                                                                                                                                                                                                                                                                                         . ​​​​​​ url = 'xxxx', //adresse de requête ajax
On_off = TRUE; // Insère le commutateur de la structure pour empêcher AJAX de charger incorrectement les données plusieurs fois
        revenir{
             fillData:function(callback){
                                                                                                                                                                                              var _that = this; on_off = faux;
                         /* ajax
-----------------------*/
// $.get(url,{ page:page,count:30},function(json){
                                                                                                                                                                                                                                                 ​                                                                                                                                                                                                                                                                                                         //                                                                                                                                                                                                                                                                                                        //                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           //                                                 // },'json');
/* Minuterie de test de simulation pour simuler les données de requête ajax
----------------------------*/
                  setTimeout(function(){
// Simulation terminée
Si(page==3){
                           _that.loadedTips();
                         revenir ;
                                                                                                                                                                                                    _that.appendHTML(testJson.data);
on_off = vrai;
                                                               } 400 );
            },
             appendHTML:function(data){
              var len = data.length,
                        n = 0 ;
pour(;n                var k = 0;
                    n>(ligne-1)?k=n%ligne:k=n;
                    $li[k].innerHTML = '' data[n].name '';
                >
                this.getOTop();
            },
            getOTop:fonction(){
                oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()]) $target .offset().top;
            },
            Conseils chargés :fonction(){
                $('#loadTips').find('span').text('数据已加载完');
                setTimeout(function(){
                    $('#loadTips').css({'visibility':'hidden'});
                },200);
                // 解绑事件
                $(window).unbind('scroll',$.proxy(this.scrollEvent,this));
            },
            scrollEvent:fonction(){
                if($(document).scrollTop() $(window).height()>oTop&&on_off){
                    this.fillData();                       
                >
            },
            init:fonction(){
                this.fillData();
                $(window).bind('scroll',$.proxy(this.scrollEvent,this));
            >
        >
    }();
    wallPic.init();