• 瀑布流案例


      <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>瀑布流</title>
            <style>
              .box{
                150px;
                padding:5px;
                float:left;
                transition:all 500ms;
              }
              .box_img{
                padding:5px
              }
              img{
                100%;
                border-radius:10px;
                box-shadow: 0 0 5px 5px rgba(0,0,0,0.3)
              }
            </style>
          </head>
          <body>
          </body>
      </html>
      <script>
        var imgs=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg","18.jpg","19.jpg","20.jpg"];
        var st="";
        function fn(){
          for(var i=0;i<imgs.length;i++){
            st+="<div class='box'>";
              st+="<div class='box_img'>";
                st+="<img src='./img/"+imgs[i]+"'/>"
              st+="</div>";
            st+="</div>";
          }
          document.body.innerHTML=st;
        }
        fn()
        var list=document.getElementsByClassName("box");

        function jiazai(){
          var widwidth=document.documentElement.clientWidth||document.body.clientWidth;
          var geshu=parseInt(widwidth/list[0].offsetWidth)
          var height=[]
          for(var i=0;i<list.length;i++){
            if(i<geshu){
              var s=height.push(list[i].offsetHeight)
              list[i].style.position="static";
            }
            else{
              var minheight=Math.min.apply(null,height)
              var indexj=j
              for(var j in height){
                if(height[j]==minheight){
                  indexj=j;
                  break;
                }
              }
              var boxlist=list[indexj];
              list[i].style.position="absolute";
              list[i].style.left=boxlist.offsetLeft+"px";
              list[i].style.top=minheight+"px";
              height[indexj]=minheight+list[i].offsetHeight;
            }
          }
        }
        window.onload=function(){
          jiazai()
        }
        window.onresize=function(){
          jiazai()
        }
        window.onscroll=function(){
          var s=document.documentElement.clientHeight||document.body.clientHeight;
          var c=document.documentElement.scrollTop||document.body.scrollTop;
          var d=list[list.length-1].offsetTop;
          if(s+c>d){
            fn();
            jiazai()
          }
        }
      </script>

  • 相关阅读:
    JS判断鼠标移入元素的方向
    EJB开发第一个无状态会话bean、开发EJBclient
    Android摇一摇振动效果Demo
    吃饭与团队惬意
    Factorization Machines 学习笔记(三)回归和分类
    代理---视图间数据的传递:标签显示输入的内容【多个视图中】
    cocos2d-x v3.2 FlappyBird 各个类对象详细代码分析(7)
    金典 SQL笔记(4)
    用GDB调试多进程程序
    C程序设计的抽象思维-算法分析-大多数元素
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10114681.html
Copyright © 2020-2023  润新知