JavaScript melaksanakan kemahiran pemuatan gambar aliran air terjun principle

JavaScript melaksanakan kemahiran pemuatan gambar aliran air terjun principle_javascript

WBOY

Lepaskan： 2016-05-16 15:16:35

asal

1432 orang telah melayarinya

Mari kita bercakap tentang prinsip umum, mari kita mulakan dengan gambar:

Penerangan fungsi:

Muat data yang berbeza mengikut nilai atribut menu yang berbeza
Tarik bar skrol ke bawah ke kedudukan tertentu untuk pramuat imej, dan jadikan html apabila bar skrol ditarik ke bawah;
Alihkan tetikus ke atas senarai gambar untuk memaparkan maklumat terperinci
Pelan pelaksanaan teknikal:

Mari kita susun dahulu proses daripada memuatkan kepada paparan:

1. Muatkan data 2. Sambung HTML dan tulis pada halaman
3. Semak sama ada semua img dalam HTML yang baru ditulis telah dimuatkan Jika ya, pergi ke 5, jika tidak pergi ke 4 4. Tunggu sehingga imej dimuatkan

5. Kira kedudukan setiap elemen

Sakit kepala terbesar pada mulanya ialah cara meletakkannya Kemudian, selepas bimbingan rakan, saya akhirnya menyelesaikannya: kira jumlah lajur gambar yang ada dan letakkan ketinggian setiap lajur ke dalam tatasusunan. Setiap kali imej dimuatkan, cari nilai terkecil dalam tatasusunan dan tetapkan bahagian atas imej semasa kepada nilai ini Selepas selesai, tambahkan ketinggian imej kepada nilai terkecil dalam tatasusunan dan kembalikannya kepada tatasusunan. secara berurutan.

PS:
Oleh kerana terdapat terlalu banyak kod untuk fungsi ini, kami hanya boleh melakukan penguraian mudah asas kod:

Kesukaran kedua yang dihadapi semasa proses pembangunan ialah: seperti yang ditunjukkan dalam gambar di atas, menggerakkan tetikus ke bar menu memerlukan menukar senarai imej, dan aliran air terjun diperlukan untuk memuatkan jenis data yang berbeza. Oleh itu, kita perlu berurusan dengan cara melaksanakan antara muka permintaan kod sekali sahaja untuk setiap halaman semasa menukar halaman, bukannya meminta semula antara muka data setiap kali halaman ditukar, dan hanya melakukan operasi menukar paparan gambar senarai.
Memandangkan setiap menu mempunyai atribut tersuai, masalah ini mudah diselesaikan: cipta objek untuk merekodkan sama ada menu semasa telah melaksanakan kod, dan jika tidak, laksanakan data permintaan.

// 创建用于记录每列高度的数组
_getLowestCol: function() {
  t._cols = new Array(5),min = 0;
  // 初始化为0
  for (var i = 0; i < t._cols.length; i++) {
    if (cols[i] < cols[min]) {
      min = i;
    }
    return min;
  }
},
_reposition: function() {
  t._grids.each(function(i, grid) {
    //先显示出来
    grid = $(grid).show();
    
    var height = grid.outerHeight(), min = t._getLowestCol();

    // 定位
    grid.animate({
      left: (t._colWidth + t._colSpacing) * min,
      top: t._cols[min],
      opacity: 1
    },1000);
    // 记录高度
    t._cols[min] += height;
  });

}

Salin selepas log masuk

Berikut ialah kod penuh:
html:

var isLoad = {};//是否载入过
labelType.mouseover(function() {
  var i = $(this).index();
  var api = _this.attr('api');//接口标识
  
  if(! isLoad[ api ]){
    isLoad[ api ] = i;
    loadData(wrapper, api);
  }
  
});

Salin selepas log masuk

js:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{  list-style-type:none;}
li img{width:100%;list-style:none;}
</style>
</head>
<body>
  <div class="photo_box">
    <ul id="container" style="border:1px solid #000;width:80%;height:600px;overflow:hidden;margin:0 auto;position: relative;">
    </ul>
    <div id="loading" class="loading" style="text-align: center;margin-top: 20px;font-size: 1.2em;">加载中...</div>
    <div id="more" class="more"style="text-align: center;margin-top: 20px;font-size: 1.2em;"><input type="button" value="更 多" id="clear" /></div>
  </div>
<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
seajs.use(['lib/jquery/1.11.x/index.js', '_example/waterFall_1.1/waterfall.js'], function($, waterFall) {
  waterFall.init({
    container: $('#container'),
    dataURL: 'http://www.woxiu.com/index.php&#63;action=Index/Main&do=ApiZhuboGrade',
    dataType: 'jsonp',
    template: '<% for (var i = 0; i < data.length; i++) { %>' +
            '<li style="display: none;">' +
              '<img src=" <%-data[i].room_img%> ">' +
            '</li>' + 
          '<% } %>',
    colWidth: 200,
    colSpacing: 10,
    rowSpacing: 15,
    page: 1,
    pageEnd: 8,
  });

  // 限制同时展示的页数
  var loadCounter = 1;
  function pageNum(){
    if (loadCounter >= 3) {
      $('#more').show();
      $('#loading').hide();
      return true;
    } else {
      loadCounter++;
      $('#more').hide();
      $('#loading').show();
    }
    return false;
  }
  $('#clear').click(function() {
    loadCounter = 1;
    waterFall._loadNext();
  });
});

</script>
</body>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.