js实现照片墙效果_照片墙效果js-程序员宅基地

技术标签: css  前端  js  javascript  

js实现不规则排列 照片墙效果

在这里插入图片描述

underScope.js库在这自行下载

 <script src="underScore.js"></script>
  <style>
        *{
    
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
        }
        html, body,ul{
    
            width: 100%;
            height: 100%;
        }
        #ps{
    
            position:relative;
        }
        #ps li{
    
            width:200px;
            height:100px;
            box-shadow:0 0 10px 4px gray;
            position: absolute;
            /*transition: all 1s;*/
        }
        #ps li img{
    
            width:200px;
            height:100px;
            box-shadow:0 0 10px 4px gray;
            transition: all 3s;
        }

        #ps li.current{
    
            left:50% !important;
            top:50% !important;
            transform:rotate(0deg) translate(-50%, -50%) scale(1.1, 1.1) !important;
            transition: all 1s linear !important;
            z-index: 99;

        }
    </style>
 <body>
  <ul id="ps"></ul>
  <script>
    var colorList=['#FF9DA4','#FFEEAD','#981C4F','#67BADE','#67BADE','#007ACC','#ED91AD','#A9A7F5','#828288','#90EEE4']
      window.onload=function () {
    
          var ps=document.getElementById('ps');

          //2.动态创建li标签
          for(var i=0;i<10;i++){
    
              var li=document.createElement('li');
              ps.appendChild(li);
              // var img=document.createElement('img');
              // img.src="./image/pic"+(i+1)+'.png';
              li.style.backgroundColor=colorList[i];
          }
          //3.获取所有的li标签
          var alllis=ps.children;

          //4.求出屏幕的宽度和高度
          var screeW=document.documentElement.clientWidth-250;
          var screeH=document.documentElement.clientHeight-360;

          //5.遍历
          for(var j=0;j<alllis.length;j++){
    
              //5.1取出单个li标签
              var li=alllis[j];
              //5.2随机分布li标签的位置
              li.style.left=_.random(0,screeW)+'px';
              li.style.top=_.random(0,screeH)+'px';

              //5.3取随机角度
              li.style.transform='rotate('+_.random(0,360)+'20deg)';

              //5.4监听点击事件
              li.onclick=function () {
    
                  for(var i=0;i<alllis.length;i++){
    
                      alllis[i].className='';
                  }
                  this.className='current';
              }
          }
      }
  </script>
</body>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41429765/article/details/107954797

智能推荐

Nginx-rtmp流媒体服务器及使用ffmpeg推流_nginx-dependence-程序员宅基地

文章浏览阅读710次。1、安装Nginx依赖创建nginx-dependence文件夹,在该文件夹中安装依赖:mkdir nginx-dependencecd nginx-dependencewget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.40.tar.gztar -zxvf pcre-8.40.tar.gzcd pcre..._nginx-dependence

SpringBoot拦截器中redisTemplate为NULL_spingboot redistemplate null-程序员宅基地

文章浏览阅读1.1k次。springboot拦截器无法注入redisTemplate在工作中我们经常需要做登录拦截验证或者其他拦截认证功能,基于springboot项目下我们很容易想到结合redis做的分布式拦截,把用户登录或者需要验证的信息放到redis里面。但是在写拦截器的时候发现redisTemplate一直无法注入进来,最后查资料才发现springboot拦截器是在Bean实例化之前执行的,所以Bean实例无法注入。解决方法:知道拦截器执行在bean实例化前执行的,那么我们就让拦截器执行的时候实例化拦截器Bean_spingboot redistemplate null

thinkphp 3.2 基础_this->display-程序员宅基地

文章浏览阅读508次。ThinkPHP:MVC框架Model 模型(数据库操作)View 视图(页面显示)Controller 控制器(逻辑处理)优点1、代码分工更加明确2、便于网站的维护与管理(便于二次开发)特点1、国内程序员研发2、轻量级框架3、集成Smarty模板引擎4、封装类5、目录自动生成6、项目单一入口命名空间namespace:从php5_this->display

CentOS 7 安装 JDK_centos7-jdk8镜像安装sz-程序员宅基地

文章浏览阅读401次。Linux 环境CentOS 7.1 (64-bit system)JDK 8 (jdk-8u221-linux-x64.tar.gz) 下载传送门安装home 目录下建 downloads(也可以是任意目录)下用于存放下载的软件可以在Linux上直接使用 wget 命令下载也可以,也可以本地下载安装传到 Linux 上,只要把安装包弄到 Linux /home/download..._centos7-jdk8镜像安装sz

jdk8使用lambda将map转换为新map-程序员宅基地

文章浏览阅读1w次。方式1 Map<String, Column> newColumnMap= new HashMap<>(); originalColumnMap.entrySet().stream().forEach(x -> newColumnMap.put(x.getKey(), new Column(x.getValue())));方式2public class Defensive { public static void main(String[] a.._jdk8使用lambda将map转换为新map

Android Display buffer_handle_t的定义-程序员宅基地

文章浏览阅读309次。1. buffer_handle_t文件位置:system\core\include\system\window.htypedef const native_handle_t* buffer_handle_t;2. native_handle_t文件位置:system\core\include\cutils\native_handle.htypedef struct nativ...

随便推点

vue 项目内网穿透报错Invalid Host header_vue 穿透有错误提示-程序员宅基地

文章浏览阅读435次。我在进行的时候遇到两个问题,一个是项目带不开,说服务器没有启动另外一个是Invalid Host header第一个问题解决:项目要有跳转地址第二个问题在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可转发成功devServer: { disableHostCheck: true, }vue-cli版本3.0的情况下修改vue.config.js的配置module.expo._vue 穿透有错误提示

Radio按钮用法举例-程序员宅基地

文章浏览阅读1.3k次。[size=large][color=blue]Radio按钮用法举例:[/color][code="jsp"]显示隐藏[/code]1. 以上两个radio拥有不同id,但有相同的name属性,相同的name可以指明这两个radio是属于同一个radio组,这相这两个radio的选中效果会互斥。将radio的id属性赋值给label的for属性,起到了..._radio示例

Hugo 与 nginx 结合使用-程序员宅基地

文章浏览阅读813次。hugo 与 nginx结合使用简介Hugo是一种go语言编写的静态网站生成器。适用于搭建个人blog、公司主页、help等网站,是一种小型的CMS系统。静态站点的好处就是快速、安全、易于部署,方便管理。Hugo 优势快!!! 天下武功唯快不破。。。。。。。。世界上最快的静态网站生成工具!5秒生成6000个页面!文档为Markdown格式,语法超简单;Hugo 可以做静态文件生成工具..._hugo使用nginx

easyUI——easyui-textbox的onblure事件失效_"easyui textbox autocomplete=\"on\"失效"-程序员宅基地

文章浏览阅读5.5w次,点赞3次,收藏16次。easyUI的form表单中有很多种类型的标签,easyui-validate、easyui-textbox、easyui-combox、easyui-datebox、easyUI-datetimebox等等。在使用easyui-textbox时,想通过onblure()事件做一些处理,可是,事件总不被触发。一个最基本最简单的onblure(),怎么可能不执行?因为缓存?来回试了好多次,还是不_"easyui textbox autocomplete=\"on\"失效"

Go语言从入门到规范-1.3、Go基础之流程控制-程序员宅基地

文章浏览阅读129次。Go语言从入门到规范-1.3、Go基础之流程控制文章目录Go语言从入门到规范-1.3、Go基础之流程控制1、for循环(1)、基本用法(2)、for进阶(3)、for是Go中的while(4)、无限循环2、if条件判断(1)、基本用法(2)、if简短语句(3)、if和else3、switch(1)、基础用法(2)、switch求值顺序(3)、没有条件的switch4、defer(1)、基本用法(2)、defer栈1、for循环(1)、基本用法Go 只有一种循环结构:for 循环。基本的 for

右键菜单,各种内容一键完成,注册表的使用_allfilesystemobjects-程序员宅基地

文章浏览阅读394次。各种内容一键完成,注册表的使用前言过程一,如果是想右键文件夹的时候出现在菜单中,需要在AllFilesystemObjects的shell文件夹中右键添加项二,如果是想在右键空白的地方打开的菜单中添加前言之前在使用bandzip的时候,因为电脑装了俩系统,而且经过更新换代,bandzip的在文件夹下打包不好用了,便想着自己右键添加一下。于是发现了注册表这个好东西。在使用npm的时候经常用到cmd,需要cd到文件夹下运行npm run dev。用到注册表添加完右键菜单就方便很多了过程先在搜索框找到注_allfilesystemobjects