基于JavaScript实现瀑布流布局


Posted in Javascript onAugust 15, 2018

本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下

1、html+css+js代码:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
  <title>hhh</title>
</head>
<body>
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    #main{
      position: relative;
    }
    .pin{
      float: left;
      padding: 15px 0 0 15px;
    }
    .box{
      border-radius: 5px;
      box-shadow: 0 0 6px #ccc;
      border:1px solid #ccc;
      padding: 10px;

    }
    .box img{
      width: 162px;
      height:auto;
    }
  </style>

<script type="text/javascript">
  window.onload = function(){

    waterfall("main","pin");

    var dataint = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};

    window.onscroll = function(){
      if (checkscrollside()) {
        var oparent = document.getElementById('main');
        for (var i = 0; i < dataint.data.length; i++) {
          var opin = document.createElement('div');
          opin.className = 'pin';
          oparent.appendChild(opin);
          var obox = document.createElement('div');
          obox.className = 'box';
          opin.appendChild(obox);
          var oimg = document.createElement('img');
          oimg.src = './images/' +dataint.data[i].src;
          obox.appendChild(oimg);
        }
        waterfall('main','pin');
      };
    }


  }

  //parent为父元素的id,pin为子元素id
  function waterfall(parent,pin){
    var oparent = document.getElementById(parent);
    var apin = getclassobj(oparent,pin);//获取id为oparent的类名为pin的元素
    var ipinw = apin[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth/ipinw);
    oparent.style.cssText = 'width:' + ipinw*num + 'px;margin:0 auto;';

    var pinharr = [];
    for( var i = 0;i < apin.length; i++)
    {
      var pinh = apin[i].offsetHeight;
      if (i < num) {
        pinharr[i] = pinh;
      }
      else{
        var minh = Math.min.apply(null,pinharr);
        var minhindex = getminhindex(pinharr,minh);
        apin[i].style.position = 'absolute';
        apin[i].style.top = minh +'px';
        apin[i].style.left = apin[minhindex].offsetLeft + 'px';
        pinharr[minhindex] += apin[i].offsetHeight; 
      }

    }
  }

  //获取id为parent的类名为classname的元素
  function getclassobj(parent,classname){

    var obj = parent.getElementsByTagName('*');
    var pins = [];
    for (var i = 0; i < obj.length; i++) {
      if (obj[i].className == classname) {
        pins.push(obj[i]);
      }
    };
    return pins;
  }

  function getminhindex(arr,minh){
    for(var i in arr){
      if (arr[i] == minh) {
        return i;
      }
    }
  }

  function checkscrollside(){
    var oparent = document.getElementById('main');
    var apin = getclassobj(oparent,'pin');
    var lastpinh = apin[apin.length - 1].offsetTop + Math.floor(apin[apin.length - 1].offsetHeight/2);
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var documenth = document.documentElement.clientHeight;
    return(lastpinh<scrollTop + documenth)?true:false;
  }
</script>
</body>
  <div id="main">
    <div class="pin">
      <div class="box">
        <img src="images/0.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/1.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/2.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/3.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/4.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/5.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/6.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/7.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/8.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/9.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/10.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/11.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/12.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/13.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/14.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/15.jpg">
      </div>
    </div>

    <div class="pin">
      <div class="box">
        <img src="images/16.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/17.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/18.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/19.jpg">
      </div>
    </div>

    <div class="pin">
      <div class="box">
        <img src="images/20.jpg">
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="images/21.jpg">
      </div>
    </div>
  </div>
</html>

2、思路分析

首先做出静态布局来。先计算出一行放多少个元素,然后再让下一个元素放入第二行中,然后我们要计算出,放入第二行的第一个元素要放在哪个位置,故我们应该有一个数组用来存放每列的高度,当静态的这些元素都放进去之后,可以更加完善,比如当拖动滚动条的时候,页面刷新,更多元素填充,这里要用到json。

3、实现过程

1.初始的静态页面通过css来实现

2.静态的瀑布流布局,先要获取到父级对象main下面的所有类为pin的元素,然后计算一行中有几个块,此时用当前屏幕的宽度去除一个块的宽度,得到num。然后用一个数组,用来存储一行中每列的高度,通过循环,找出最小的高度,以及最小高度的下标值,然后用绝对定位设置高度。

3.当鼠标滚动的时候,通过一个函数来检查是否需要加载新的图片元素,这里用一个变量lastpinh计算出最后一个元素距离顶部的高度和自身高度的一半之和,当页面的高度与滚动出去的高度之和大于最后一个的高度时,触发事件,添加新的元素,以及调整布局。

4、需要掌握知识点:

json的数据存储

window.onscroll();
document.createElement();
obj.className;
obj.appendChild(obj1);
obj.offsetWidth/offsetHeight/offsetLeft/offsetTop;
document.documentElement.clientWidth/clientHeight;
obj.style.cssText
Math.min.apply();
Math.floor();
obj.push();
document.documentElement.scrollTop
document.body.scrollTop;

注:这些都是我所不熟练的知识点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 #Javascript
jQuery轮播图实例详解
Aug 15 #jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 #Javascript
对layui中表单元素的使用详解
Aug 15 #Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
vue生命周期实例小结
Aug 15 #Javascript
layui获取多选框中的值方法
Aug 15 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
php header示例代码(推荐)
2010/09/08 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Python函数返回值实例分析
2015/06/08 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
2014年团支部工作总结
2014/11/17 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏