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


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插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
Jquery 扩展方法
2010/05/06 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Vue渲染函数详解
2017/09/15 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue实现简单全选和反选功能
2020/09/15 Javascript
python运行其他程序的实现方法
2017/07/14 Python
python绘制多个曲线的折线图
2020/03/23 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
Python中正则表达式的用法总结
2019/02/22 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
HTTP状态码详解
2021/03/18 杂记
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
六查六看自查材料
2014/02/17 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
运动会演讲稿
2014/05/07 职场文书
2014年转正工作总结
2014/11/08 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书