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


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来刷新当前页面保留参数的具体实现
Dec 23 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 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产生随机字符串函数
2006/12/06 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
js实现内置计时器
2019/12/16 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
详解python 爬取12306验证码
2019/05/10 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
浅谈Python type的使用
2019/11/19 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
职业生涯规划书怎么写?
2014/09/14 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2019教师的学习计划
2019/06/25 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技