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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
vue地区选择组件教程详解
May 04 Javascript
详解vue-cli3使用
Aug 14 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 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 变量的定义方法
2010/01/26 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
Python列表list操作相关知识小结
2020/01/29 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
金融专业个人求职信范文
2013/11/28 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
大一新生检讨书
2014/10/29 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
800字作文之大雪
2019/12/04 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
go web 预防跨站脚本的实现方式
2021/06/11 Golang