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


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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
layui选项卡效果实现代码
May 19 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
vue 中的 render 函数作用详解
Feb 28 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 之Section与Cookie使用总结
2012/09/14 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php中JSON的使用与转换
2015/01/14 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python中类的一些方法分析
2014/09/25 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python实现kNN算法
2017/12/20 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python中re模块知识点总结
2021/01/17 Python
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
电子商务应届生求职信
2013/11/16 职场文书
业务员岗位职责
2013/11/16 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
小学英语课后反思
2014/04/26 职场文书
团日活动总结
2014/04/28 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
汽车广告策划方案
2014/05/31 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
暂停营业通知
2015/04/25 职场文书
给校长的建议书范文
2015/09/14 职场文书