js

1.DOM对象控制HTML详解

document.getElementsByName();//获取name
document.getElementsByTagName();//获取元素
getAttribute()  //获取元素属性   对象.getAttribute()

2.js浏览器对象——window对象
window.innerHeight   //浏览器窗口的内部宽度
3.计时器
计时方法：setInterval（）   间隔指定的毫秒数不停的执行指定的代码
        clearInterval（）  停止setInterval（）方法执行的函数代码

<button id="btn" onclick="stopTime()">按钮</button>
<p id="ptime"></p>
<script>
    var mytime  = setInterval(function () {
        getTime();
    },1000);
    function getTime() {
        var  d = new Date();
        var t = d.toLocaleTimeString();//转换为字符串
        document.getElementById("ptime").innerHTML = t;
    }
    function stopTime() {
        clearInterval(mytime);
    }
</script>


        setTimeout（）   暂停指定的毫秒数后执行指定的代码
        clearTimeout（）  停止执行setTimeout（）方法的函数代码

<body onload="myWin()">
    <button id="btn" onclick="stopWin()">按钮</button>
    <p id="ptime"></p>
    <script>
       var win;
       function myWin() {
           alert("hello");
           win = setTimeout(function () {
               myWin();
           },3000);
       }
       function stopWin() {
           clearTimeout(win);
       }
    </script>
</body>
4.瀑布流效果
.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="../css/MyCss.css">
    <script src="../js/app.js"></script>
</head>
<body>
     <div id="container">
         <div class="box">
             <div class="box_img">
                 <img src="../my/1.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/2.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/3.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/4.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/5.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/6.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/7.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/8.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/9.jpg">
             </div>
         </div>
         <div class="box">
             <div class="box_img">
                 <img src="../my/10.jpg">
             </div>
         </div>

     </div>
</body>
</html>


.css

*{
    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: 150px;
    height: auto;
}
.js

window.onload = function () {
   imgLocation(("container","box"))
    var imgData  = {"data":[{"src" : "2.jpg"},{"src" : "3.jpg"},{"src" : "4.jpg"},{"src" : "5.jpg"},{"src" : "6.jpg"}]};
    window.onscroll = function () {
      if (checkFlag()) {
          var cparent = document.getElementById("container");
          for(var i = 0;i < imgData.data.length;i++){
              var cconent  = document.createElement("div");
              cconent.className = "box";
              cparent.appendChild(cconent);
              var boximg  = document.createElement("div");
              boximg.className = "box+img";
              cconent.appendChild(boximg);
              var img = document.createElement("img");
              img.src = "img/"+imgData.data[i].src;
              boximg.appendChild(img);
          }
          imgLocation(("container","box"))
      }
    }
}
function checkFlag() {
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent, "box");
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//被隐藏的部分
    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;//当前页面的部分
    if (lastContentHeight < scrollTop + pageHeight){
        return true;
    }
        }
function imgLocation(parent,content) {
    //将父级空间下含有的content全部取出
    var caprent = document.getElementById(parent);
    var ccontent = getChildElement(caprent,content); //content为box
    var imgWidth = ccontent[0].offsetWidth;//宽度相同
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);//num为一行多少张图片
    caprent.style.cssText = "width:"+imgWidth*cols+"px;margin:0 auto";
    
    var BoxHeightArr = [];
    for(var i = 0;i < ccontent.length;i++){
        if(i<num){
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }else {
            var minheight = Math.min.apply(null,BoxHeightArr);
            var minIndex = getMinHeightLocation(BoxHeightArr,minheight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minheight+"px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
        }
        
    }
}
function getMinHeightLocation(BoxHeightArr,minHeight) {
    for (var i in BoxHeightArr){
        if (BoxHeightArr[i]==minHeight){
            return i;
        }
    }
}
function getChildElement(parent,content) {
    var contentArr = [];
    var allcontent  = parent.getElementsByTagName("*");
    for (var i = 0;i <allcontent.length;i++){
        if (allcontent[i].className ==content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}

posted @ 2019-11-18 22:11 华儿E 阅读(157) 评论(0) 收藏举报

刷新页面返回顶部

华儿E

js

公告