html-css-手写

1.手写图片瀑布流效果

<div id="content">
        <div class="box">
            <div class="box_img">
                <img src="images/u=1141339595,1371712305&fm=253&fmt=auto&app=120&f=JPEG.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/u=1215663945,2777624973&fm=253&fmt=auto&app=120&f=JPEG.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/u=1464279625,3638714393&fm=253&fmt=auto&app=120&f=JPEG.webp" alt="">
            </div>
        </div>
</div>

*{
    margin: 0px;
    padding: 0px;
}
#container{
    position: relative;
}
.box {
    padding: 5px;
    float:left;
}

.box_img{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
}

.box_img img{
    width: 200px;
    height: auto;
}

window.onload = function() {
    //1. 获取容器宽度
    var content = document.getElementById('content')
    var contentWidth = content.offsetWidth
    //2.获取单个图片的宽度
    var imgs = content.children
    var imgsWidth = imgs[0].offsetWidth
    //3.第一行可以排列多少张图片
    var nums = Math.floor(contentWidth/imgsWidth)
    //4. 收集第一排的所有图片高度
    var arrHeight = []
    for (var i =0;i<imgs.length;i++){
        if(i<nums){//这里都是第一行的高度
            //把第一行的高度放入arrHeight中
            arrHeight.push(imgs[i].offsetHeight)
        }else{
            //创建第一个元素的对象
            var obj = {
                minH:arrHeight[0],
                minI: 0
            }
            //找出最小的高度的图片
            for(var j=0;j<arrHeight.length;j++){
                if(arrHeight[j]<obj.minH){
                    obj.minH = arrHeight[j]
                    obj.minI = j
                }
            }
            imgs[i].style.position = 'absolute'
            imgs[i].style.left = imgs[obj.minI].offsetLeft + 'px'
            imgs[i].style.top = arrHeight[obj.minI] + 'px'
            arrHeight[obj.minI] = arrHeight[obj.minI] + imgs[i].offsetHeight
        }
    }
}

2.使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）

//圆形
<div class="circle"></div>
<style>
.circle {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: #666;
}
//扇形
<div class="sector"></div>
<style>
.sector{
  border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>
//三角形
<style>
#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
</style>
//菱形
.rhombus{
            width: 100px;
            height: 100px;
            transform: rotateZ(45deg)skew(30deg,30deg);
            background: blue;
        }

3.使用纯CSS实现曲线运动（贝塞尔曲线）

4.实现常用布局（三栏、圣杯、双飞翼、吸顶），可是说出多种方式并理解其优缺点

• 两栏布局,左边定宽，右边自适应

#left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

• 三栏布局,圣杯布局、双飞翼布局
• 圣杯布局

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

 #container {
   display: flex;
  }
#left {
	width:100px;
}
#right {
	width:100px;
}
#center {
	flex:1;
}

• 双飞翼布局的实现
  left、center、right三种都设置左浮动
  设置center宽度为100%
  设置负边距，left设置负边距为100%，right设置负边距为自身宽度
  设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
• 吸顶

	position: -webkit-sticky;
     position: sticky;
 	 top: 0;
     z-index: 100;