JavaScript【瀑布流-页面布局、动态设置内容居中、动态设置图片位置、页面触底、上拉加载、页面布局、动态切换、页面布局】(十五)

DOM实操-瀑布流-页面布局

瀑布流特点

DOM实操-瀑布流-动态设置内容居中

DOM实操-瀑布流-动态设置图片位置

DOM实操-瀑布流-页面触底

DOM实操-瀑布流-上拉加载

DOM实操-轮播图-页面布局

轮播图

轮播图特点

DOM实操-轮播图-动态切换

DOM实操-放大镜-页面布局

放大镜

DOM实操-放大镜-业务逻辑

DOM实操-回到顶部

回到顶部

DOM实操-瀑布流-页面布局

瀑布流

瀑布流是一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

瀑布流特点

1 多列布局

2 每列等宽

3 上拉加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="boximg">
                <img src="./img/1.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
               <img src="./img/2.jpeg"  alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/3.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/4.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/5.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/6.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/7.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/8.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/9.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/10.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/10.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/10.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/10.jpeg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="boximg">
                <img src="./img/11.jpg" alt="">
            </div>
        </div>
    </div>
    <script src="./js/index.js"></script>
 </body>
</html>

*{
    padding: 0;
    margin: 0;
}
#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.boximg{
    padding: 5px;
    box-shadow: 0 0 5px #ccc;
    border:1px solid #ccc;
    border-radius: 5px;
}
.boximg img{
    width: 250px;
    height: auto;
}

DOM实操-瀑布流-动态设置内容居中

1、获取所有需要操作的元素

2 、获取屏幕的宽度

3、获取一个图片元素容器的宽度

4 、动态计算页面横向最多可放置的图片数量

5 、动态设置样式，让内容左右居中

function waterFlow(){
    var parentContainer = document.getElementById("container");
    var screenWidth = document.documentElement.clientWidth;
    var childWidth = allChild[0].offsetWidth;
    var rowsNum = Math.floor(screenWidth / childWidth);
    parentContainer.style.cssText = "width:" + childWidth * rowsNum + "px;margin:0 auto";
}
waterFlow();

DOM实操-瀑布流-动态设置图片位置

获取一列中最小高度，后续每张图片都是放在一列中最小高度的下面

1 获取第一行图片高度，放入到数组中

2 获取后续图片，放入到数组高度最小的对应图片下面

function getMinHeightOfCols(allChild,rowsNum){
    var colsHeightArr = [];
    for(var i = 0;i<allChild.length;i++){
        if(i < rowsNum){
            colsHeightArr[i] = allChild[i].offsetHeight;
       }else{
            var minHeightofCols = Math.min.apply(null,colsHeightArr);
            var minHeightOfIndex = colsHeightArr.indexOf(minHeightofCols);
            allChild[i].style.position = "absolute";
            allChild[i].style.top = minHeightofCols + "px";
            allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft + "px";
            colsHeightArr[minHeightOfIndex] = colsHeightArr[minHeightOfIndex] + allChild[i].offsetHeight;
       }
   }
}

DOM实操-瀑布流-页面触底

1、逻辑:滚动高度 + 视口高度 = 文档高度

2、业务:滚动高度 + 视口高度 > 最后一个元素顶部距离顶部高度

function checkReachBottom(){
    var scrollHeight = document.documentElement.scrollTop;
    var pageHeight = document.documentElement.clientHeight;
    var allChild = document.getElementsByClassName("box");
    var lastChildTop = allChild[allChild.length - 1].offsetTop;
    return lastChildTop < pageHeight + scrollHeight ? true : false;
}

DOM实操-瀑布流-上拉加载

1 动态创建元素

2 重新加入瀑布流效果

window.onscroll = function () {
    if (checkReachBottom()) {
        var parentContainer = document.getElementById("container");
        for(var i = 0;i<dataImage.data.length;i++){
            var childBox = document.createElement("div");
          childBox.setAttribute("class","box");
          parentContainer.appendChild(childBox);
            var childImgBox = document.createElement("div");
          childImgBox.setAttribute("class","boximg");
          childBox.appendChild(childImgBox);
            var img = document.createElement("img");
            childImgBox.appendChild(img);
       }
        waterFlow();
   }
}

DOM实操-轮播图-页面布局

轮播图

轮播图是用一套图片以一定时间间隔（如5秒）进行循环播放，一段时间内呈现给用户不同的内容展示方式

轮播图特点

1 、自动循环播放

2、指示器聚焦导航

<div class="box">
    <div class="imglist" id="imglist">
        <ul>
            <li class="current"><a href="#"> <img src="./img/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/5.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="btn">
        <span class="leftbtn" id="left"></span>
        <span class="rightbtn" id="right"></span>
    </div>
    <div class="circle" id="circle">
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}

.box{
    width: 672px;
    height: 320px;
    border: 1px solid gray;
    margin: 100px auto;
    position: relative;
}

ul{
    list-style: none;
}

.imglist ul li{
    width: 672px;
    height: 320px;
    position: absolute;
    top:0;
    left: 0;
    display: none;
}

.imglist ul li.current{
    display: block;
}

.btn span{
    width: 55px;
    height: 55px;
    background: url("./images/sohu//slidebtnL.png");
    position: absolute;
    top: 50%;
    margin-top: -27px;
}

.btn span.leftbtn{
    left: 10px;
}

.btn span.rightbtn{
    right: 10px;
    background: url("./images/sohu/slidebtnR.png");
}

.circle{
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.circle ul li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    float: left;
    margin-right: 10px;
}
.circle ul li.current{
    background: rgba(255,255,255,1);
}

DOM实操-轮播图-动态切换

// 1. 获取元素
var imglis = document.getElementById("imglist").querySelectorAll("li");
var leftBtn = document.getElementById("left");
var rightBtn = document.getElementById("right");
var circlelis = document.getElementById("circle").querySelectorAll("li");
// idx控制图片显示
var idx = 0;
leftBtn.onclick = function () {
    idx++
    console.log(idx);
    changePic();
}
rightBtn.onclick = function () {
    idx--
    console.log(idx);
    changePic();
}
// 2. 控制页面图片显示与隐藏
function changePic() {
    // idx边界处理
    if (idx > imglis.length - 1) {
        idx = 0;
   }
    if (idx < 0) {
        idx = imglis.length - 1;
   }
    // 先把所有的current都移除，然后给对一个的那个元素添加显示就行了
    for (var i = 0; i < imglis.length; i++)
    {
         imglis[i].removeAttribute("class");
   }
    imglis[idx].setAttribute("class", "current");
    for (var i = 0; i < circlelis.length; i++) {
      circlelis[i].removeAttribute("class");
   }
    // 设置指示器高亮
    circlelis[idx].setAttribute("class","current")
}
// 点击指示器切换图片
for(var i = 0;i<circlelis.length;i++){
     (function(i){
        circlelis[i].onclick = function(){
            idx = i;
            changePic();
       }
   })(i)
}
// for (var i = 0; i < circlelis.length; i++) {
//     // 自定义属性的方式处理
//     circlelis[i].idxx = i;
//     circlelis[i].onclick = function () {
//         // 不就是获取不到i的值
//         idx = this.idxx;
//         changePic();
//     }
// }

DOM实操-放大镜-页面布局

放大镜

通过鼠标滑动，对页面某个部分的区域放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>Document</title>
    <style>
       *{
            margin: 0;
            padding: 0;
       }
        .smallpic{
            width: 450px;
            height: 450px;
            border: 1px solid gray;
            position: absolute;
            top: 100px;
            left: 100px;
       }
        .zoom{            width: 300px;
            height: 300px;
            background: yellow;
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
       }
        .bigpic{
            width: 550px;
            height: 550px;
            background: url("./images/jd/da.jpg");
            border: 1px solid gray;
            position: absolute;
            top: 100px;
            left: 552px;
            display: none;
       }
    </style>
</head>
<body>
    <div class="smallpic" id="small">
        <img src="./images/jd/xiao.jpg" alt="">
        <div class="zoom" id="zoom"></div>
    </div>
    <div class="bigpic" id="big"></div>
</body>
</html>

DOM实操-放大镜-业务逻辑

var small = document.getElementById("small");
var zoom = document.getElementById("zoom");
var big = document.getElementById("big");
small.onmouseover = function(){
    zoom.style.display = "block";
    big.style.display = "block";
}
small.onmouseout = function(){
    zoom.style.display = "none";
    big.style.display = "none";
}
var rate = 800 / 450;
small.onmousemove = function(e){
    var zoomX = e.clientX - small.offsetLeft - 150;
    var zoomY = e.clientY - small.offsetTop - 150;
    if(zoomX < 0){
        zoomX = 0;
   }
    if(zoomX >= 150){
        zoomX = 150;
   }
    if(zoomY <0){
        zoomY = 0;
   }
    if(zoomY >= 150){
        zoomY = 150;
   }
    zoom.style.left = zoomX + "px";
    zoom.style.top = zoomY + 'px';
    big.style.backgroundPositionX = -zoomX * rate + "px";
    big.style.backgroundPositionY = -zoomY * rate + "px";
}

DOM实操-回到顶部

回到顶部

回到顶部是页面常见效果，一般当页面太长的时候都会给你一个按钮，点击可以回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 500px;
       }
        #btn{
            width: 35px;
            height: 45px;
            position: fixed;
            right: 50px;
            bottom: 50px;
            background: #333;
            text-decoration: none;
            color: #fff;
            text-align: center;
            padding: 10px;
            display: none;
       }
    </style>
</head>
<body>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
    <div>内容5</div>
    <div>内容6</div>
    <a href="javaScript:void(0)" id="btn">回到顶部</a>
    <script>
        var btn = document.getElementById("btn");
        var clientHeight = document.documentElement.clientHeight;
        window.onscroll = function(){
            var scrollHeight = document.documentElement.scrollTop;
            if(scrollHeight > clientHeight){
                btn.style.display = "block"
           }else{
                btn.style.display = "none"
           }
       }
        btn.onclick = function(){
          document.documentElement.scrollTop = 0; //回到顶部
       }
    </script>
</body>
</html>