JavaScript实现瀑布流图片效果


Posted in Javascript onJune 30, 2017

本文实例为大家分享了js实现瀑布流图片效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #wrap{
      position: relative;
      list-style: none;
      margin: 0 auto;
    }
    #wrap li{
      width: 200px;
      font-size: 1.5rem;
      position: absolute;
      background-color: #CCCCCC;
      -webkit-transition: all 2s;
    }
    #wrap li div{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
<ul id="wrap"></ul>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
function randomFunction(max , min){
  return parseInt(Math.random() * (max - min)) + min;
}
var wrapUL = document.getElementById("wrap");
var width = 200;
var rightPadding = 10;
var hs = [];
var num = 0;
function setLiPos(bol){
  var lis = wrapUL.getElementsByTagName("li");
  var windowBody = document.documentElement.clientWidth;
  var cols = parseInt(windowBody / width);
  wrapUL.style.width = cols * (width + rightPadding) + "px";
  var arrT = [];
  for (var i = 0; i < cols; i++) {
    arrT[i] = 0;
  }
  function createLi(index){
    var li = lis[index]||document.createElement("li");
     
    var h = hs[index] || randomFunction(100, 300);
    li.style.height = h + "px";
    if(bol){
      hs.push(h);
    }
    var min = arrT[0];
    var minIndex = 0;
    for (var i = 0; i < arrT.length; i++) {
      if(min > arrT[i]){
        min = arrT[i];
        minIndex = i;
      }
    }
    li.style.top = arrT[minIndex] + "px";
    li.style.left = minIndex * (width + rightPadding) + "px"; arrT[minIndex] += (h + rightPadding);
    bol&&wrapUL.appendChild(li);
  }
  for(var i = 0; i < 20; i++){
    if(bol){
      num++;
    }
    createLi(i);
  }
}
setLiPos(true);
window.onresize = function(){
  setLiPos(false);
}
});
</script>
<script type="text/javascript">
$(function(){
  var imgArr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"];
  $("li").each(function(index, el) {
    var n = RandomNumBoth(0,imgArr.length-1);
    var imgsrc = imgArr[n];
    $(this).html("<div><img onload='loadImage()' src='"+imgsrc+"'></div>");
  });
});
function loadImage(){
  $("img").each(function(index, el) {
    var a=$(this).width(),
    b=$(this).height(),
    pa = $(this).parent().width(),
    pb = $(this).parent().height(),
    e=a/b, //图片宽高比 3
    pe=pa/pb; //承载图片容器宽高比 
    if(e>=pe){
      $(this).css({height:"100%",width:"auto"});
      var imgW = $(this).width(),
      iW = $(this).parent().width(),
      w = -(imgW - iW)/2;
      $(this).css('marginLeft',w);
    }else{
      $(this).css({width:"100%",height:"auto"});
      var imgH = $(this).height(),
      iH = $(this).parent().height(),
      h = -(imgH - iH)/2;
      $(this).css('marginTop',h);
    }
  });
}
function RandomNumBoth(Min,Max){
   var Range = Max - Min;
   var Rand = Math.random();
   var num = Min + Math.round(Rand * Range);
   return num;
}
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 #Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 #Javascript
jQuery表单设置值的方法
Jun 30 #jQuery
JavaScript注册时密码强度校验代码
Jun 30 #Javascript
Bootstrap Table从零开始
Jun 30 #Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 #Javascript
常见的浏览器Hack技巧整理
Jun 29 #Javascript
You might like
php adodb分页实现代码
2009/03/19 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
JQuery 入门实例1
2009/06/25 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
详解Python中的变量及其命名和打印
2016/03/11 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
经典优秀个人求职信分享
2013/12/12 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
捐款活动总结
2014/08/27 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
2014年就业工作总结
2014/11/26 职场文书
工地食品安全责任书
2015/05/09 职场文书
初中英语教学反思范文
2016/02/15 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android