JS dom基础三 操作元素尺寸位置+瀑布流

DOM基础续

DOM还可以让我们不通过样式 还可以直接获取元素的尺寸和位置

• 以下属性可以帮助我们直接获取元素的尺寸和位置, 可以直接通过DOM元素节点通过点语法获取.

• 尺寸

  1. 内尺寸

     clientWidth = width + 左右的padding

     clientHeight = height + 上下的padding

  2. 外尺寸

     offsetWidth = width + 左右的padding + 左右border

     offsetHeight = height + 上下的padding + 上下border

  3. 例

     var bigDiv = document.querySelector(".big");
     //	console.log(bigDiv.clientWidth, bigDiv.clientHeight);
     //	console.log(bigDiv.offsetWidth, bigDiv.offsetHeight);		
     //	console.log(span1.clientWidth, span1.clientHeight);
     

• 位置

  1. 内位置

     clientLeft: 元素左padding的外边缘距离左border的外边缘之间的距离 (border-left)

     clientTop: 元素上padding的外边缘距离上border的外边缘之间的距离(border-top)

  2. 外位置

     offsetLeft: 元素的左边框的外边缘距离离它最近的, 设置了非static定位的祖先元素的左边框的内边缘

     offsetTop: 元素的上边框的外边缘距离离它最近的, 设置了非static定位的祖先元素的上边框的内边缘

  3. 例

     //	console.log(bigDiv.clientLeft, bigDiv.clientTop);
     //	console.log(bigDiv.offsetLeft, bigDiv.offsetTop);
     

• 滚动尺寸

  scrollWidth

  scrollHeight

• 滚动位置

  scrollLeft

  scrollTop

• 滚动条滚动事件

  该事件会在滚动条发生滚动时触发

  bigDiv.onscroll = function(){
  //	console.log(bigDiv.scrollTop);
      if (this.scrollTop > 100) {
          this.style.backgroundColor = "blue";
      }else {
          this.style.backgroundColor = "yellow";
      }
  }
  

• 注意：

  以上所有的属性 除了 scrollLeft和scrollTop是读写性的之外, 其余的属性全部是只读的!!!

  读: 可获取 写: 可设置

瀑布流

• 瀑布流的原理:

  瀑布流是一种多列布局, 每一列的宽度相等, 每一列里的元素的高度不同，但是最终整列的高度不相差太多

  难点: 如何将新元素放置到对应的列里???

  核心思想: 每次都将新的元素放置到当前最低的那一列里.