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


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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
Ext 今日学习总结
Sep 19 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
Oracle 常见问题解答
2006/10/09 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PDO::inTransaction讲解
2019/01/28 PHP
jquery 学习笔记一
2010/04/07 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
jquery获取节点名称
2015/04/26 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
Python描述器descriptor详解
2015/02/03 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python验证身份证信息实例代码
2019/05/06 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
美术指导助理求职信
2014/04/20 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
HTTP中的Content-type详解
2022/01/18 HTML / CSS
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android