首页 > 其他分享 >HTML5+CSS3+JS小实例:网格图库

HTML5+CSS3+JS小实例:网格图库

时间:2024-06-07 14:58:10浏览次数:21  
标签:CSS3 实例 图库 网格 JS HTML HTML5 源码

实例:网格图库

技术栈:HTML+CSS+JS

效果:

源码:

【HTML】

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格图库</title>
    <link rel="stylesheet" href="243.css">
</head>

<body>
    <main class='gallery'>
        <div class='item' data-pos='0'><img src='https://picsum.photos/400/300?random=0'></div>
        <div class='item' data-pos='1'><img src='https://picsum.photos/400/300?random=1'></div>
  

标签:CSS3,实例,图库,网格,JS,HTML,HTML5,源码
From: https://blog.csdn.net/weixin_68127493/article/details/139468020

相关文章

  • 【JS封装-数组操作】强化编程实践:精选JavaScript函数封装集锦-关于数组操作(数组去重、
    目录数组去重数组快速排序过滤数组映射数组数组扁平化数组求和数组最大值数组最小值数组切片数组乱序(洗牌算法)数组去重/***去除数组中的重复项。*@param{Array}array要去重的数组。*@returns{Array}去重后的数组。*/functionuniqueArray(array......
  • Three.js入门指南:从基础到实践的三维渲染之旅
    threejs相关资料threejs官网threejs案例安装(Installation)使用NPM和构建工具进行安装对于大多数用户而已,从npm包注册表中心安装并使用构建工具会是一个更推荐的方案。因为项目需要的依赖越多,就越有可能遇到静态托管无法轻易解决的问题。而使用构建工具,导入本地J......
  • 前端 JS 经典:阿里云文件上传思路
    前言:功能点概括:1、多选文件2、选择文件夹3、拖拽4、选择后形成一个列表,列表里有一些信息5、有进度条6、控制并发数7、可取消8、展示统计信息1.交互实现交互的目标是要拿到file对象。只要拿到file对象,就能通过网络上传。1.1如何选择多文件给input添加multip......
  • 微前端学习笔记(5):从import-html-entry发微DOM/JS/CSS隔离
    import-html-entry 是qiankun中一个举足轻重的依赖,用于获取子应用的HTML和JS,同时对HTML和JS进行了各自的处理,以便于子应用在父应用中加载。 import-html-entry主要是实现了以下几个能力拉取url对应的html并且对html进行了一系列的处理拉取上述html中所......
  • 记录工作中常用的 JS 数组相关操作
    工作中难免会遇到各种各样的数据结构,较为全面的了解数组操作,对于复杂数据结构的处理会非常有用且节省时间所以想在这里总结一下工作中常用的数组操作,都是一些非常基础的知识,大家看个乐就好~目录工作中常用的数组方法常见数组方法中的用法、以及坑slice()和splice()方法......
  • js中try中定义的数据catch无法访问
    如果你在try块中定义了一个变量,但在catch块中访问时得到undefined,这可能是因为以下几个原因:变量作用域问题:如果在try块中使用let或const声明了变量,这些变量只在try块内部可见(即具有块级作用域)。当控制权转移到catch块时,这些变量就不可见了,因此尝试访问它们会得到undefined。但根......
  • C# NewtonJson Self referencing loop detected for property 'Parent' with type
    privatevoidImage_MouseLeftButtonDown(objectsender,MouseButtonEventArgse){stringimgJson1=JsonConvert.SerializeObject(img1);System.IO.File.AppendAllText($"{DateTime.Now.ToString("yyyyMMddHHmmssffff")}_img.json",imgJso......
  • C# 使用Newtonsoft.Json的JsonProperty设置返回的Json数据列名/C# 通过实体类序列化生
    原文链接:https://blog.csdn.net/weixin_44917045/article/details/103236167         https://blog.csdn.net/bazinga_y/article/details/134416680在写分页的时候,返回Json数据给前台的时候,数据不能出来,原因就是Json数据的列名是大写的,而页面需要的是小写的。......
  • json.dumps 用法
    在Python中,json.dumps()函数是将Python对象转换为JSON格式的字符串的方法。下面是json.dumps()函数的基本用法:importjson#定义一个Python字典对象data={"name":"John","age":30,"city":"NewYork"}#将Python字典转换为JSO......
  • three.js高性能渲染室外场景
    大家好,本文在相关文章的基础上,使用three.js渲染了高性能的室外场景,在移动端也有较好的性能,并给出了代码,分析了关键点,感谢大家~关键词:three.js、Web3D、WebGL、室外场景、InstancedDraw、大场景、LOD、FrustumCull、优化、开源代码:Github相关文章:three.js实现数字孪生3D仓库......