用瀑布流的方式在网页上插入图片的简单实现方法


Posted in Javascript onSeptember 23, 2016

当我们的网页需要插入很多图片的时候,为了美观,我们可以选择用瀑布流的方法插入图片

首先我们在body里面放入我们需要展示的图片

<div id="box">
  <div class="dinwei">
    <div class="pic">
      <img src="image/1.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/2.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/3.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/4.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/5.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/6.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/7.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/8.jpg">
    </div>
  </div>
  <div class="dinwei">
    <div class="pic">
      <img src="image/9.jpg">
    </div>
  </div>
</div>

然后设定样式

<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .dinwei{
      float: left;
    }
    .pic{
      padding: 5px;
      border: 1px solid #000000;
    }
    img{
      margin: 0;
      padding: 10px;
      width: 220px;
      height: auto;
    }
  </style>

接下来就是把图片用瀑布流的方式展现的JS

<script type="text/javascript">
  window.onload=function(){
  var dinwei=document.getElementsByClassName("dinwei");
  var windwidth=document.documentElement.clientWidth||document.body.clientWidth;
  var dinwidth=getStyle(dinwei[0],"width");
  var num=Math.floor(windwidth/dinwidth);
  //计算一行几张图片
  //取出高度最小的列
  var heightList=[];
  for(var i=0;i<dinwei.length;i++){
    if(i<num){
      heightList[heightList.length]=getStyle(dinwei[i],"height");
    }else{
      var minHeight=getmin(heightList);
      var amin=minHeight.value;
      var index=minHeight.index;

      var temp=dinwei[i];
      temp.style.position="absolute";
      temp.style.top=amin+"px";
      temp.style.left=index*dinwidth+"px";
      heightList[index]=amin+getStyle(temp,"height");
    }
  }
  }
  function getmin(arr){
    var min=arr[0];[3,3,2,1,5,2]
    for(var i=1;i<arr.length;i++){
      if(arr[i]<min){
        min=arr[i];
      }
    }
    var index=0;
    for(var j=0;j<arr.length;j++){
      if(arr[j]==min){
        index=j;
        break;
      }
    }
    return {value:min,index:index}
  }
  function getStyle(obj, attr) {
    if (obj.currentStyle) {
      return parseFloat(obj.currentStyle[attr]);
    } else {
      return parseFloat(window.getComputedStyle(obj)[attr]);

    }
  }
</script>

以上就是小编为大家带来的用瀑布流的方式在网页上插入图片的简单实现方法的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
js实现微信分享代码
Oct 11 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
用js编写留言板
Mar 17 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
浅谈Web页面向后台提交数据的方式和选择
Sep 23 #Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
Sep 23 #Javascript
打造自己的jQuery插件入门教程
Sep 23 #Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 #Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 #Javascript
jQuery实现边框动态效果的实例代码
Sep 23 #Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 #Javascript
You might like
php获取是星期几的的一些常用姿势
2019/12/15 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python抽象类的新写法
2015/06/18 Python
Python单例模式实例详解
2017/03/01 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
环境保护建议书
2014/08/26 职场文书
小学教师工作总结2015
2015/04/07 职场文书
楚门的世界观后感
2015/06/03 职场文书
单身证明格式样本
2015/06/15 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
同事离别感言
2015/08/04 职场文书
领导干部学习心得体会
2016/01/23 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python