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


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 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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 switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
node中的session的具体使用
2018/09/14 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
基于pandas中expand的作用详解
2019/12/17 Python
python关于调用函数外的变量实例
2019/12/26 Python
python中os包的用法
2020/06/01 Python
python中判断文件结束符的具体方法
2020/08/04 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
UDP协议功能
2013/01/06 面试题
小学英语教学反思案例
2014/02/04 职场文书
员工考核评语大全
2014/04/26 职场文书
信息管理专业自荐书
2014/06/05 职场文书
学校政风行风整改方案
2014/10/25 职场文书
小学中等生评语
2014/12/29 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
禁毒心得体会范文
2016/01/15 职场文书