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


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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
纯JS实现五子棋游戏
May 28 Javascript
vue-model实现简易计算器
Aug 17 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
PHP实现的方程求解示例分析
2016/11/11 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
javascript实现画板功能
2020/04/12 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
Python实现上下班抢个顺风单脚本
2018/02/07 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
八年级美术教学反思
2014/02/02 职场文书
文明倡议书范文
2014/04/15 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
东京审判观后感
2015/06/01 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书