11111

444

333

offsetWidth = 本身宽度 + 内层padding*2 + border*2 + 外层padding*2

flaot

等宽不等高

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

offsetHeight 不包括 margin

2-7编程练习

2-6编程练习

蓝色线条是蓝块距离页面顶端的距离加上滑块一半的高度，黑色线条是浏览器高度加上已经划过的距离。滚动时候，蓝色线条小于黑色时发生预加载。

<template>
  <div id="main">
    <div class="box" v-for="i in arr">
      <div class="pic">
        <img :src="i.src" alt="">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "waterfall",
        data(){
          return {
            arr:[
              {src:"../../static/images/0.jpg"},{src:"../../static/images/1.jpg"},{src:"../../static/images/2.jpg"},
              {src:"../../static/images/3.jpg"},{src:"../../static/images/4.jpg"},{src:"../../static/images/5.jpg"},
              {src:"../../static/images/6.jpg"},{src:"../../static/images/7.jpg"},{src:"../../static/images/8.jpg"},
              {src:"../../static/images/9.jpg"},{src:"../../static/images/10.jpg"},{src:"../../static/images/11.jpg"},
              {src:"../../static/images/12.jpg"},{src:"../../static/images/13.jpg"},{src:"../../static/images/14.jpg"},
              {src:"../../static/images/15.jpg"},{src:"../../static/images/16.jpg"},{src:"../../static/images/17.jpg"},
              {src:"../../static/images/18.jpg"}, {src:"../../static/images/19.jpg"},{src:"../../static/images/20.jpg"}
              ],

            arr_high:[], minHigh:"", minIndex:"", flag:true, count:0
          }
        },
        methods:{
          //预加载
          loadimg(){
            var count = 0;
            var len = this.arr.length;

            this.arr.forEach((val,index)=>{
              var imgObj = new Image();
              imgObj.src = val.src;
              imgObj.onload = ()=> {
                count++;
                if(count === len){
                  this.waterfall();
                }
              }
            });
          },
          //流式布局
          waterfall(){
            var boxW = document.getElementsByClassName("box")[0].offsetWidth;
            var windowW = document.documentElement.offsetWidth || document.body.offsetWidth;
            var cols = Math.floor(windowW/boxW);
            document.getElementById("main").style.width = boxW * cols + "px";
            this.arr_high = [];
            for(var i = 0;i < document.getElementsByClassName("box").length;i++){
              if(i < cols){
                this.arr_high.push(document.getElementsByClassName("box")[i].offsetHeight);
              }else{
                this.minHigh = Math.min.apply(null,this.arr_high);
                this.arr_high.forEach((val,index)=>{
                  if(val === this.minHigh)
                    this.minIndex = index;
                });
                document.getElementsByClassName("box")[i].style.position = "absolute";
                document.getElementsByClassName("box")[i].style.left = boxW * this.minIndex + "px";
                document.getElementsByClassName("box")[i].style.top = this.minHigh + "px";
                this.arr_high[this.minIndex] += document.getElementsByClassName("box")[i].offsetHeight;
              }
            }
          },
          //是否滑动到底部
          ifLastBox(){
            var lastBox = document.getElementsByClassName("box")[document.getElementsByClassName("box").length - 1];
            var scrollHigh = document.body.scrollTop || document.documentElement.scrollTop;
            var screenHigh = document.body.clientHeight || document.documentElement.clientHeight;
            return ((scrollHigh + screenHigh) > (lastBox.offsetTop + lastBox.offsetHeight/2)) ? true : false;
          },
        },
        mounted:function () {
          this.$nextTick(function () {
            this.loadimg();
            window.onscroll = ()=> {
              if(this.ifLastBox()){
                this.arr.forEach((val,index)=>{
                  var obj = {};
                  obj.src = val.src;
                  this.arr.push(obj);
                });
                this.loadimg();
              }
            }
          });
        }
    }
</script>

<style scoped>
  *{margin: 0; padding: 0;}
  #main{position: relative; margin: 0 auto;}
  .box{padding: 10px; float: left;}
  .pic{padding: 10px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px #ccc; border: 1px #ccc solid;}
  .pic img{width: 300px; height: auto; background: url("../../static/echo/images/loading.gif") 50% no-repeat;}
</style>

vue.js  —— 原生JS + 图片预加载重写流式布局，解决代码堆叠问题  

什么情况下适合使用内边距却不适使用外边距？

记得补噢噢噢噢

jQuery的两大优点：支持连缀，隐式迭代

瀑布流布局三种实现方式：JavaScript原生方法；jQuery方法；CSS3的多栏布局。

瀑布流特点：等宽不登高。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片瀑布流特效</title>
    <style type="text/css" media="screen">
        *{margin: 0;padding: 0;}
        .container{
        width: 1150px;
        margin: 0 auto;
        height: auto;
        padding: 50px 0 50px 0;
        -webkit-column-count: 5;
        -moz-column-count: 5;
        -o-column-count: 5;
        -ms-column-count: 5;
        }
        .container img{
        width: 165px;
        height: auto;
        padding: 10px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        }
</style>
</head>
<boy>
    <div class="container">
        <img src="img/0.jpg" alt="">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
        <img src="img/7.jpg" alt="">
        <img src="img/8.jpg" alt="">
        <img src="img/9.jpg" alt="">
        <img src="img/10.jpg" alt="">
        <img src="img/11.jpg" alt="">
        <img src="img/12.jpg" alt="">
    </div>
</body>
</html>

图片来自于慕课网本堂课程跟学图片

https://codepen.io/yu363474235/pen/BVzdLZ

这个是我写的瀑布流demo

瀑布流的特点是等宽不等高

瀑布流的原理是通过计算，按照绝对定位的原理让他出现在相对应的位置上的。

• 大的盒子第一个盒子#main是要按照相对定位

• 每个盒子之间的距离是通过padding的方式作用在第二个.box的盒子实现的。

瀑布流的实现方式：

1. JavaScript实现

2. JQuery

3. CSS3

4. 
   

瀑布流布局

提示:  1. 遍历所有数据块，将前五张图片的高度值添加到数组中

  2. 借助apply()方法求出数组中的最小值

  3. 编写一个求某个值在数组中索引的方法，求出最小值在数组中的索引

  4. 根据最小值和最小值的索引计算图片出现的位置

  5. 根据图片的高度值改变数组

<!Doctype>

<html>

 <head>

   <title>瀑布流布局</title>

   <meta charset="utf-8" />

   <link type="text/css" rel="stylesheet" href="css/style.css" />

   <script type="text/javascript" src="js/script.js"></script>

 </head>

 <body>

     <div id="main">

  <div class="box">

  <div class="pic">

  <img src="images/0.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/1.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/2.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/3.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/4.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/5.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/6.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/7.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/8.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/9.jpg" />

  </div>

  </div>

  <div class="box">

  <div class="pic">

  <img src="images/10.jpg" />

  </div>

  </div>

</div>

 </body>

</html>

<script type=”text/javascript”>

 window.onload=function(){

     waterfall('main','box');

}

function waterfall(parent,box){

  var oParent=document.getElementById(parent);

  var oBoxs=getByClass(oParent,box);

for(var i=0;i<oBoxs.length;i++){

    if(i<cols){

       // 将图片的高度值添加到数组中

       hArr.push(oBoxs[i].offsetHeight)

    }else{

      // 求最小值和最小值的索引

      var minH = math.min.apply(null,hArr);

      var index = getMinIndex(hArr,minH);

// 计算及定义图片出现的位置

      oBoxs[i].style.position='absolute';

      oBoxs[i].style.top=minH+'px';

      oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';

      // 改变数组值

     hArr[index] += oBoxs[i].offsetHeight;

    }

  }

function getByClass(parent,clsName){

  var boxArr=new Array(), 

      oElements=parent.getElementsByTagName('*');

  for(var i=0;i<oElements.length;i++){

    if(oElements[i].className==clsName){

      boxArr.push(oElements[i]);

    }

  }

  return boxArr;

}

</script>

// 求值在数组中的索引,arr接收的是数组，val接收的是判断的值

function getMinhIndex(arr,val){

    for(var i in arr){

        if(arr[i]==val)

        return i

    }

}

定义函数getByClass()实现获取document或指定父元素下所有class为on的元素。要求该函数可以接收一个参数也可以接收两个参数

  提示:

  1.第一个参数为必需的，第二个参数为可选的

  2.第一个参数为要获取的元素的类名，第二个参数如果传，则传父元素的id，不传则默认用document

  3.返回获取到的所有带有”on”这个类的DOM元素

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<ul id="list">

<li class="on">1</li>

<li class="select">2</li>

<li class="on">3</li>

<li>4</li>

</ul>

<p class="on">class为on的p标签</p>

</body>

</html>

<script type="text/javascript">

  window.onload=function(){

     var len1= getByClass('on','list');

     alert(len1.length);  // 结果等于2为正确

var len2= getByClass('on');

     alert(len1.length);  // 结果等于3为正确

}

function getByClass(clsName, parent){

 //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素  

 var oParent = parent?document.getElementById(parent):document;

 var boxArr = [],

 var oElement = parent.getElementsByTagName('*');

 for(var i=0;i<oElement.legth;i++){

     if(oElement[i].className == clsName){

         boxArr.push(oElement[i]);

     }

     return boxArr;

 }

}

</script>

offsetWidth = 本身宽度 + 内层padding*2 + border*2 + 外层padding*2

最后一个盒子的top值+其高度<document高度+滚动条滚动的值

瀑布流：等宽不等高

js: 

1、将main下所有class为box的元素取出来

$("<img>").attr("src","0.jpg");

//attr用于获取属性，后接一个参数时为获取属性值，接两个参数时为设置属性值

$.inArray(min.attr);

找到min在attr数组中的索引号

width()：只获取定义的宽度

outerWidth():  获取div的整个宽度，包括border,padding,margin

var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
    hArr.push(oBox[i].offsetHeight)