Melaksanakan reka letak aliran air terjun berdasarkan kemahiran JavaScript (2)

Melaksanakan reka letak aliran air terjun berdasarkan kemahiran JavaScript (2)_javascript

WBOY

Lepaskan： 2016-05-16 15:18:00

asal

1691 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod terperinci pelaksanaan JavaScript bagi reka letak aliran air terjun dan berkongsinya dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

1. Cipta templat Html

Ideanya adalah untuk menggunakan bekas div untuk menyimpan semua kandungan, kemudian kotak div digunakan untuk meletakkan gambar, dan akhirnya div box_border digunakan sebagai bingkai gambar

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>瀑布流</title>
</head>
<body>
  <div class="container" id="container">
    <div class="box_border" id="box_border">

      <div class="box" id="box1">
        <img src="image/01.jpg">
      </div>
  <!--把Box复制多份,这里因为代码重复省略了-->
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

2. Hanya tetapkan gaya melalui css

Terutamanya tetapkan peletakan mendatar, warna bingkai foto, jidar, dll.

/*
边界不留空,背景黑灰
*/
body{
  margin: 0px;
  background: darkgray;
}
/*
总布局设置为相对布局
*/
.container{
  position: relative;
}
/*
设置box属性
*/
.box{
  padding: 5px;
  float: left;
}
/*设置图片边框阴影和圆角
*/
.box_border{
  padding: 5px;
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 5px #ccc;
  border-radius: 5px;
}
/*设置图片格式*/
.box_border img{
  width: 150px;
  height: auto;
}

Salin selepas log masuk

3.JS mengawal bilangan gambar yang diletakkan dalam setiap baris

Selepas reka letak CSS di atas, saiz tetingkap penyemak imbas berubah, dan bilangan gambar di dalamnya juga akan berubah Sekarang kita perlu menggunakan JS untuk menetapkan bilangan gambar dalam setiap baris, yang boleh mencapai hasil yang baik untuk skrin berbeza saiz

/*
 用于加载其他函数
 */
window.onload = function(){
  setImgLocation("container");
}
/*
 设置图片个数
 */
function setImgLocation(parent){
  var cparent = document.getElementById(parent);//得到父节点
  var childArray = getChildNodes(cparent);//得到图片数量
  var imgWidth = childArray[0].offsetWidth;//获取照片宽度
  var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
  var count = Math.floor(screenWidth/imgWidth);//每行的个数
  cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中

}


/*
 获取全部图片的个数
 */
function getChildNodes(parent){
  var childArray =[];//定义一个数组存放图片box
  var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
  //循环添加class为box的节点
  for(var i = 0;i<tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}
注意:针对不同屏幕大小显示的个数是不一样的

Salin selepas log masuk

4.JS melaksanakan aliran air terjun statik

Mula-mula laksanakan reka letak statik, iaitu penyemak imbas tidak akan memuat semula imej baharu secara automatik apabila ditarik ke bawah Melaksanakan algoritma pilih atur adalah sangat mudah

1 Simpan semua ketinggian baris pertama imej ke dalam tatasusunan
2 Kira ketinggian minimum dan kedudukan imej yang sepadan dalam baris pertama
3 Letakkan gambar pertama selepas baris pertama pada kedudukan ini
4 Tetapkan semula ketinggian kedudukan kepada jumlah dua imej
5 Gelung semua gambar yang tinggal dalam 2

/*
 用于加载其他函数
 */
window.onload = function(){
  setImgLocation("container");
}
/*
 设置图片个数及位置排列
 */
function setImgLocation(parent){
  var cparent = document.getElementById(parent);//得到父节点
  var childArray = getChildNodes(cparent);//得到图片数量
  var imgWidth = childArray[0].offsetWidth;//获取照片宽度
  var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度
  var count = Math.floor(screenWidth/imgWidth);//每行的个数
  cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";//设置其宽度并居中
  //定义数组,存放第一行照片高度
  var imgHArray = [];
  //循环遍历图片
  for(var i=0;i<childArray.length;i++){
    //如果图片在第一行则获取高度
    if(i<count){
      imgHArray[i] = childArray[i].offsetHeight;
    }else//否则把最小高度的填充剩余图片
    {
      var minHeight = Math.min.apply(null,imgHArray);//获取最小高度
      var minIndex = getMinIndex(minHeight,imgHArray);//获取最小高度对应的下标
      childArray[i].style.position = "absolute";//设置要填充的图片盒子为绝对布局,否则不能更换位置
      childArray[i].style.top = minHeight+"px";//设置要填充图片距顶高度
      childArray[i].style.left = childArray[minIndex].offsetLeft+"px";//设置要填充图片距左高度
      imgHArray[minIndex] += childArray[i].offsetHeight;//填充后把当前位置高度设为两个图片相加
      //开始下一轮循环
    }

  }

}
/*
 获取最小高度对应的下标
 */
function getMinIndex(minHeight,imgHArray){
  for(var i in imgHArray){
    if(imgHArray[i] == minHeight){
      return i;
    }
  }
}
/*
 获取全部图片的个数
 */
function getChildNodes(parent){
  var childArray =[];//定义一个数组存放图片box
  var tempNodes = parent.getElementsByTagName("*");//获取父节点下的所有节点
  //循环添加class为box的节点
  for(var i = 0;i<tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}

Salin selepas log masuk

5.js merealisasikan pemuatan dinamik

Pemuatan dinamik bermakna bar skrol tidak pernah meluncur ke bawah Untuk menyelesaikan pemuatan dinamik kita perlu mempertimbangkan dua isu:

1). Bila hendak dimuatkan? Jarak gelongsor Ketinggian penyemak imbas>Jarak antara gambar terakhir dan bahagian atas 2). Bagaimana untuk memuatkan? Dengan mencipta nod baharu, tambahkan nod yang dibuat padanya Kod akhir:

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.