Implementierung eines Wasserfall-Flow-Layouts basierend auf JavaScript (2)_Javascript-Kenntnissen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Implementierung eines Wasserfall-Flow-Layouts basierend auf JavaScript (2)_Javascript-Kenntnissen

May 16, 2016 pm 03:18 PM

javascript 瀑布流

Das Beispiel in diesem Artikel erläutert den detaillierten Code der JavaScript-Implementierung des Wasserfall-Flow-Layouts und teilt ihn als Referenz mit allen. Der spezifische Inhalt ist wie folgt.

1. HTML-Vorlage erstellen

Die Idee besteht darin, zuerst einen Div-Container zu verwenden, um den gesamten Inhalt aufzunehmen, dann die Div-Box zum Platzieren des Bildes und schließlich die Div-Box_Border als Bildrahmen. Der Code lautet wie folgt

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;瀑布流&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container" id="container"&gt;
    &lt;div class="box_border" id="box_border"&gt;

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

Nach dem Login kopieren

2. Legen Sie Stile einfach über CSS fest

Legen Sie hauptsächlich die horizontale Platzierung, die Farbe des Fotorahmens, den Rand usw. fest.

/*
边界不留空,背景黑灰
*/
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;
}

Nach dem Login kopieren

3.JS steuert die Anzahl der Bilder, die in jeder Zeile platziert werden

Nach dem obigen CSS-Layout ändert sich die Größe des Browserfensters und auch die Anzahl der darin enthaltenen Bilder. Jetzt müssen wir JS verwenden, um die Anzahl der Bilder in jeder Zeile festzulegen, wodurch gute Ergebnisse für Bildschirme erzielt werden können in verschiedenen Größen

/*
 用于加载其他函数
 */
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&lt;tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}
注意:针对不同屏幕大小显示的个数是不一样的

Nach dem Login kopieren

4.JS implementiert einen statischen Wasserfallfluss

Implementieren Sie zunächst ein statisches Layout, das heißt, der Browser aktualisiert beim Herunterziehen nicht automatisch neue Bilder Die Implementierung des Permutationsalgorithmus ist sehr einfach

1. Speichern Sie alle Höhen der ersten Bildreihe in einem Array
2. Berechnen Sie die Mindesthöhe und die entsprechende Position des Bildes in der ersten Zeile
3. Platzieren Sie das erste Bild nach der ersten Reihe an dieser Position
4. Setzen Sie die Höhe der Position auf die Summe der beiden Bilder zurück
5. Alle verbleibenden Bilder in einer Schleife

Code:

/*
 用于加载其他函数
 */
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&lt;childArray.length;i++){
    //如果图片在第一行则获取高度
    if(i&lt;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&lt;tempNodes.length;i++){
    if(tempNodes[i].className == "box"){
      childArray.push(tempNodes[i]);
    }
  }
  return childArray;//返回所有的子节点
}

Nach dem Login kopieren

5.js realisiert dynamisches Laden

Dynamisches Laden bedeutet, dass die Bildlaufleiste niemals nach unten gleitet. Um das dynamische Laden zu lösen, müssen wir zwei Probleme berücksichtigen:

1). Wann laden? Gleitabstand Browserhöhe>Der Abstand zwischen dem letzten Bild und der Oberseite 2). Wie wird geladen? Indem Sie einen neuen Knoten erstellen, fügen Sie den erstellten Knoten hinzu
Endgültiger Code:
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn