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. 
   

瀑布流布局