Berkongsi petua untuk melaksanakan aliran air terjun dengan jQuery_jquery

Analisis: Aliran air terjun, terdapat dua cara untuk melakukannya

(1) Skim kedudukan mutlak: Setiap sel ditetapkan kepada kedudukan mutlak Melalui pengiraan, atas dan kiri masing-masing boleh ditetapkan

(2) Skim terapung: Buat susun atur lajur N (terapung), dan kemudian masukkan data gambar mengikut urutan Contohnya, jika N ialah 3 lajur, gambar pertama dimasukkan ke dalam lajur pertama, dan gambar kedua dimasukkan ke dalam lajur kedua, gambar ketiga dimasukkan ke lajur ketiga, dan gambar keempat dimasukkan ke lajur pertama... Dengan cara ini, ia dimasukkan dalam gelung (tidak boleh adaptif)

Kod CSS dan HTML:

Salin kod Kod adalah seperti berikut:

​body,ul,li{margin:0;margin:0;}
ul{list-style:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*Air Terjun*/
.wallList{width:860px;}
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{background:#eee;border:1px pepejal #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;}

Salin kod Kod adalah seperti berikut:

          

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

Memuatkan...

Menggunakan jQuery untuk melaksanakan, idea umum adalah seperti berikut:

(1) Dapatkan nilai ketinggian terkecil dalam lajur N. API yang disediakan oleh JS ialah Math.min(), tetapi API ini hanya boleh lulus dalam 2 parameter paling banyak, jadi anda perlu menggunakan aplly untuk melanjutkan Math.min . memohon(null,[xxx,xxx,xxxx,xxxx]) (2) Ikat acara tatal ke tetingkap dan dapatkan $(document).scrollTop() apabila menarik ke bawah Apabila $(document).scrollTop() lebih besar daripada nilai ketinggian minimum, minta url dengan ajax data, pergi ke halaman Sisipkan struktur HTML Jika tiada struktur HTML, ia akan menggesa "Memuatkan Selesai", dan kemudian tetingkap akan menyahjilidkan acara ini

Salin kod

Kod adalah seperti berikut:

// 数据格式
    var testJson = {
        "status":1,
        "data":[
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"图片1"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片2"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"图片3"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片4"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片5"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","width":240,"height":260,"name":"图片6"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"图片7"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"图片8"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","width":240,"height":265,"name":"图片9"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"图片10"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","width":240,"height":310,"name":"图片11"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片12"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","width":240,"height":150,"name":"图片13"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","width":240,"height":165,"name":"图片14"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","width":240,"height":100,"name":"图片15"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片16"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","width":240,"height":225,"name":"图片17"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片18"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片19"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片20"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"图片21"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片22"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"图片23"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片24"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片25"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","width":240,"height":210,"name":"图片26"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"图片27"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"图片28"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","width":240,"height":195,"name":"图片29"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"图片30"}
        ]
    }
    var wallPic = function(){
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
oTop = 0, // Nilai penghakiman menatal
              baris = 3,//Bilangan lajur
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            . ​​​​ url = 'xxxx', //alamat permintaan ajax
On_off = TRUE; // Masukkan suis struktur untuk mengelakkan AJAX daripada salah memuatkan data berkali-kali
        kembali{
             fillData:function(panggilan balik){
                                                                                                                                                                                                                                                                                                                                                      var _itu = ini; on_off = palsu;
                       /* ajax
-----------------------*/
// $.get(url,{ page:page,count:30},function(json){
                                                                                                                                                                                                                                                 ​                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            //                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      //                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        //                                                                                                                                                                                                                                                                                                                                                                                                                                                                 //                                                  // },'json');
/* Ujian simulasi-Tetapkan simulasi pemasa data permintaan Ajax
----------------------------*/
                   setTimeout(function(){
// Simulasi ditamatkan
Jika(halaman==3){
                           _That.loadedTips();
                         kembali;
                                                                                                                                                                                                                                                                                                             _that.appendHTML(testJson.data);
on_off = benar;
                                                               },400);
            },
             appendHTML:function(data){
              var len = data.length,
                        n = 0;
untuk(;n                 var k = 0;
                    n>(baris-1)?k=n%baris:k=n;
                    $li[k].innerHTML = '' data[n].nama '';
                }
                this.getOTop();
            },
            getOTop:function(){
                oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()]) $target .offset().atas;
            },
            loadedTips:function(){
                $('#loadTips').find('span').text('数据已加载完');
                setTimeout(function(){
                    $('#loadTips').css({'keterlihatan':'tersembunyi'});
                },200);
                // 解绑事件
                $(window).unbind('scroll',$.proxy(this.scrollEvent,this));
            },
            scrollEvent:function(){
                if($(document).scrollTop() $(window).height()>oTop&&on_off){
                    this.fillData();                       
                }
            },
            init:function(){
                this.fillData();
                $(window).bind('scroll',$.proxy(this.scrollEvent,this));
            }
        }
    }();
    wallPic.init();