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


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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
浅谈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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Python中max函数用法实例分析
2015/07/17 Python
python线程、进程和协程详解
2016/07/19 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python简易版图书管理系统
2019/08/12 Python
基于python实现学生信息管理系统
2019/11/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
python如何更新包
2020/06/11 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
PHP面试题集
2016/12/18 面试题
父母寄语大全
2014/04/12 职场文书
给校长的一封检讨书
2014/09/20 职场文书
个人委托书范文
2015/01/28 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL