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

 

目录

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

瀑布流特点

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

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

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

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

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

轮播图 

轮播图特点

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

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

放大镜 

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

 DOM实操-回到顶部

回到顶部 

---

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

瀑布流 

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

瀑布流特点

1 多列布局

2 每列等宽

3 上拉加载 

*{
    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

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

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

轮播图 

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

轮播图特点

1 、自动循环播放

2、 指示器聚焦导航

*{
    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

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

放大镜 

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

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实操-回到顶部

回到顶部 

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

    
    
    
    
    


    
内容1
    
内容2
    
内容3
    
内容4
    
内容5
    
内容6
    回到顶部