Penjelasan terperinci tentang javascript untuk melaksanakan kemahiran layout_javascript mutlak aliran air terjun

Arus air terjun mesti popular sejak beberapa tahun. Pertama, ia adalah gelombang yang dicetuskan oleh Pinterest, dan kemudian reka bentuk domestik berkembang pesat, dengan banyak contoh air terjun muncul, seperti Mogujie, Mark (tetapi baru-baru ini ia telah terlibat dalam pornografi, dan ia seolah-olah telah diusik), dan "Wow" " Taobao ini adalah contoh yang bagus, dan hari ini kita akan bercakap tentang aliran air terjun.
1. Reka letak mutlak:

Prinsip pelaksanaan JS

Malah, kesukaran utama gaya air terjun ialah cara menyusun imej dengan kemas dalam lajur yang sepadan dan bila hendak mula menyegarkan dan memuatkan imej.
Logik dan algoritma utama untuk menyusun gambar dengan kemas adalah terlebih dahulu memperoleh berapa banyak lajur yang boleh diletakkan di dalam bekas, dan kemudian, melalui pengiraan, simpan ketinggian lajur pertama, dan kemudian melintasi ketinggian yang tinggal (kecuali elemen dalam lajur pertama) dan letakkan masing-masing Masukkan lajur dengan ketinggian terkecil. Tambah satu demi satu, dan akhirnya tamatkan traversal.
Tetapan untuk memulakan penyegaran adalah sangat mudah Penyegaran air terjun hanya berkaitan dengan satu peristiwa, iaitu, window.onscroll Algoritma utama ialah apabila halaman meluncur ke ketinggian terendah, ia mula memuatkan nod dan menambahnya sudah tentu, bilangan nod yang ditambah tidak tetap.
Mari kita mulakan dengan kod saya akan menerangkannya dalam tiga bahagian Satu ialah susunan imej, yang lain adalah menetapkan kedudukan pemuatan.

1. Susunan gambar

var $ = function() {
  return document.querySelectorAll.apply(document, arguments);
 }
 var arrHeight = []; //得到分列的高度
 var columns = function() { //计算页面最多可以放多少列
  var containerW = $("#main")[0].clientWidth,
   pinW = $(".pin")[0].offsetWidth;
  return Math.floor(containerW / pinW);
 }
 var getIndex = function(arr) { //获得最小高度的index
   var minHeight = Math.min.apply(null, arr); //获得最小高度
   for (var i in arr) {
    if (arr[i] === minHeight) {
     return i;
    }
   }
  }
  //根据列数确定第一排img的高度并放入数组当中。
 var setCenter = (function() { //通过列数设置宽度
  var main = $('#main')[0]; //获得罩层
  var getPadding = function() { //设置padding
   var col = columns(); //获得最后一列
   var padding = main.clientWidth - col * $('.pin')[0].offsetWidth;
   return padding / 2;
  }
  var getComputedStyle = function(ele) { //兼容IE的支持情况
   if (window.getComputedStyle) {
    return window.getComputedStyle(ele);
   } else {
    return ele.currentStyle;
   }
  }
  var getPinPad = function() { //获得pin的padding值
   var pin = $(".pin")[0];
   return parseInt(getComputedStyle(pin).paddingLeft);
  }
  return function() { //设置宽度
   main.style.padding = `0 ${getPadding()}px 0 ${getPadding()-getPinPad()}px`;
  }
 })();
 var overLoad = function(ele) {
  var index = getIndex(arrHeight),
   minHeight = Math.min.apply(null, arrHeight), //获取最小高度
   pins = $('.pin'),
   style = ele.style;
  style.position = "absolute";
  style.top = minHeight + "px"; //设置当前元素的高度
  style.left = pins[index].offsetLeft + "px";
  arrHeight[index] += ele.offsetHeight;
 }
 //初始化时执行函数
 var init = function() {
   var pins = $(".pin"),
    col = columns();
   setCenter(); //设置包裹容器的宽度
   for (var i = 0, pin; pin = pins[i]; i++) {
    if (i < col) { //存储第一排的高度
     arrHeight.push(pin.offsetHeight);
    } else {
     overLoad(pin); //将元素的位置重排
    }
   }
  }

Terdapat sejumlah 7 fungsi (fungsi besar) dan satu pembolehubah. Mari kita bercakap tentang idea itu. Pertama sekali, fungsi yang dilaksanakan selepas halaman dimuatkan adalah init Anda mesti tahu bahawa program js mesti mempunyai pintu masuknya. Kemudian kita pergi jauh ke dalam badan fungsi init dan memerhati. Logik perniagaan yang dilaksanakan dalam init adalah untuk menyimpan ketinggian baris pertama elemen dan kemudian menyusun semula elemen yang tinggal. Gunakan fungsi lajur untuk mendapatkan bilangan maksimum lajur yang boleh diletakkan dalam tetingkap semasa, dan kemudian tetapkan bahagian tengah bekas (hanya tetapkannya melalui pelapik Seterusnya, lalui kotak sel pin, simpan ketinggian yang pertama). baris elemen dalam tatasusunan arrHeight, dan tambah baki Elemen di bawah disusun semula. Tidak perlu menjelaskan fungsi lain. Mari fokus pada fungsi Overload.
2. Beban berlebihan

var overLoad = function(ele) {
  var index = getIndex(arrHeight),
   minHeight = Math.min.apply(null, arrHeight), //获取最小高度
   pins = $('.pin'),
   style = ele.style;
  style.position = "absolute";
  style.top = minHeight + "px"; //设置当前元素的高度
  style.left = pins[index].offsetLeft + "px";
  arrHeight[index] += ele.offsetHeight;
 }

Terdapat fungsi getIndex dalam OverLoad untuk mendapatkan indeks ketinggian minimum, dan kemudian anda boleh menetapkan kedudukan elemen ele masuk (kedudukan mutlak ialah nilai px ketinggian minimum dalam tatasusunan). kiri ditetapkan untuk baris pertama Kedudukan jidar kiri unsur Indeks. Akhir sekali update ketinggian, ok!!!
3. Tetapkan lokasi pemuatan

var dataInt = [{
  'src': '1.jpg'
 }, {
  'src': '2.jpg'
 }, {
  'src': '3.jpg'
 }, {
  'src': '4.jpg'
 }, {
  'src': '1.jpg'
 }, {
  'src': '2.jpg'
 }, {
  'src': '3.jpg'
 }, {
  'src': '4.jpg'
 }];

 function isLoad() { //是否可以进行加载
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
   point = scrollTop + wholeHeight; //页面底部距离header的距离
  var arr = $('.pin');
  var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
  return (lastHei < point) &#63; true : false;
 }
 //处理滑动
 var dealScroll = (function() {
  var main = $('#main')[0],
   flag = true;
  return function() {
   if (isLoad() && flag) {
    for (var i = 0, data; data = dataInt[i++];) {
     var div = document.createElement('div');
     div.innerHTML = temp(data.src);
     div.className = "pin";
     main.appendChild(div);
     overLoad(div); //和上面的overload有耦合性质
    }
    flag = false;
    setTimeout(function() { //控制滑行手速，时间越长对速度的滑动时间影响越大。
     flag = true;
    }, 200);
   }
  }
 })();

 function temp(src) {
  return `
  <div class="box">
   <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
  </div>
 `;
 }

Sebenarnya, intipatinya ada di bahagian sebelumnya Ini hanyalah cara memuatkan data Sudah tentu, anda boleh klik untuk memuatkan (cetusan manual), atau kaedah pemuatan lain. Sudah tentu, cara anda menyediakannya bergantung sepenuhnya kepada anda. Oleh itu, ikuti trend dan masih tatal ke bawah untuk memuatkan. Teruskan dan cari fungsi kemasukan->dealScroll Tugas fungsi ini adalah untuk menentukan sama ada pemuatan boleh dilakukan melalui fungsi isload. Mari kita lihat fungsi isload Ini ialah titik utama pemuatan bergolek.

 function isLoad() { //是否可以进行加载
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
   wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
   point = scrollTop + wholeHeight; //页面底部距离header的距离
  var arr = $('.pin');
  var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
  return (lastHei < point) &#63; true : false;
 }

Dengan pengiraan, kedudukan bahagian bawah halaman dari port pandangan (bahagian bawah bar alat) dibandingkan dengan kedudukan mutlak elemen terakhir Jika jarak gelongsor melebihi, pemuatan didayakan.

yeah~ Dah habis.
kembali ke dealScroll
Langkah seterusnya ialah melihat bahagian pemuatan Sebenarnya tiada apa yang boleh dikatakan tentang bahagian ini Ia adalah untuk mencipta nod div, kemudian meletakkannya di hujung bekas, dan menggunakan fungsi lebihan untuk mengendalikan kedudukan. nod. Di samping itu, pada penghujung fungsi, saya menyediakan helah untuk mengawal kelajuan gelongsor Dengan pendikitan fungsi, saya boleh menghalang permintaan daripada menjadi terlalu perlahan dan pengguna menghantar permintaan berulang kali, menyebabkan pembaziran sumber.
Kemudian, bahagian ini boleh berakhir.

4. Responsif Bahagian terakhir ialah responsif. Bahagian ini juga sangat mudah selagi anda melakukan kerja enkapsulasi dengan baik, sebenarnya, bahagian ini hanya menambah acara ubah saiz. Mari teruskan mencari fungsi kemasukan.

 var resize = (function() {
   var flag;
   return function(fn) {
    clearTimeout(flag);
    flag = setTimeout(function() { //函数的节流,防止用户过度移动
     fn();
     console.log("ok")
    }, 500);
   }
})();

Begitu juga, idea throttling fungsi digunakan di sini Anda mesti tahu bahawa sebagai seorang pengaturcara, jangan sekali-kali berfikir bahawa pengguna tidak boleh melakukan sesuatu yang bodoh, contohnya, apabila anda tiada apa-apa untuk dilakukan, seret tetingkap pelayar main, zum masuk, zum keluar, dan kemudian Besarkan... Sebenarnya, saya sering melakukan ini, kerana saya tidak mempunyai teman wanita dan saya bosan menulis kod, jadi saya hanya seret penyemak imbas untuk bermain. Oleh itu, mempertimbangkan keperluan anjing tunggal kami, adalah sangat perlu untuk menggunakan pendikit fungsi. Jika anda berminat dengan kasut kanak-kanak, boleh rujuk artikel saya sebelum ini untuk mengetahui lebih lanjut. Untuk menjelaskan, fungsi panggil balik di sini merujuk kepada fungsi init, tetapi beberapa perubahan perlu dibuat pada init. Lihat butiran.

 var update = function(ele) { //当resize的时候，重新设置
  ele.style.position = "initial";
 }
 //初始化时执行函数
 var init = function() {
   var pins = $(".pin"),
    col = columns();
   arrHeight = []; //清空高度
   setCenter(); //设置包裹容器的宽度
   for (var i = 0, pin; pin = pins[i]; i++) {
    if (i < col) { //存储第一排的高度
     arrHeight.push(pin.offsetHeight);
     update(pin);
    } else {
     overLoad(pin); //将元素的位置重排
    }
   }
  }

Kemas kini perlu ditambah di atas untuk mengemas kini baris pertama elemen baharu.
Kemudian anda boleh mengalihkannya dan menggunakannya.
Ini pasti kebanyakan kandungan susun atur Untuk kaedah susun atur aliran air terjun JavaScript yang lain, sila rujuk artikel seterusnya "Penjelasan terperinci tentang pelaksanaan JavaScript bagi reka letak aliran air terjun" .