亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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. 
   

瀑布流布局