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


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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
javascript去除空格方法小结
May 21 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
5.PHP的其他功能
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
商场端午节活动方案
2014/01/29 职场文书
销售员岗位职责
2014/06/09 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers