当前位置: 首页 > news >正文

jquery: Justified gallery

一,官网

官网:

https://miromannino.github.io/Justified-Gallery/

github:

https://github.com/miromannino/Justified-Gallery

 

二,使用

引入:

<link rel="stylesheet" href="/static/justified/justifiedGallery.min.css" />
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/justified/jquery.justifiedGallery.min.js"></script>

html

    <div id="mygallery" ><!-- other images... -->{{range $key, $value := .Items}}<a href="javascript:alert(1)"><img alt="Title 2"  src="{{$value.ThumbImageUrl}}" /></a>{{end}}</div>

js

<script>//$("#mygallery").justifiedGallery();$('#mygallery').justifiedGallery({rowHeight: 250,margins: 5}).on('jg.complete', function () {$(this).find('img').css('border-radius', '10px');//$(this).find('a').css('border-right', '2px solid #f00');});$(window).on('load', function() {$('#myGallery').justifiedGallery('refresh');});
</script>

三,测试效果:

image

http://www.hskmm.com/?act=detail&tid=10422

相关文章:

  • 安装crmeb
  • gin: 用zap记录访问日志
  • gin: 打包模板文件、静态文件到二进制文件中
  • gin: 判断是否ajax请求
  • gin: 静态文件
  • 详细介绍:【论文精读】基于YOLOv3算法的高速公路火灾检测
  • MacOS 下fuzz学习踩坑点
  • An Empirical Study on Commit Message Generation using LLMs via In-Context Learning 论文笔记
  • 实用指南:人工智能学习:Transformer结构中的编码器层(Encoder Layer)
  • vcpkg 安装依赖
  • Java03课前问题列表
  • JavaScript错误处理完全指南:从基础到自定义错误实战
  • 1、论文准备
  • PION 游击
  • Web3 开发者修炼全图谱:从 Web2 走向 Web3 的实用的系统性学习指南
  • 实用指南:医院高值耗材智能化管理路径分析(下)
  • Flutter应用自动更新系统:生产环境的挑战与解决方案
  • .NET Core中使用SignalR
  • 实用指南:修复Conda连接异常:CondaHTTPError HTTP 000 CONNECTION FAILED故障排除指南
  • 高级数据结构手册
  • Tarjan 学习笔记
  • 使用JavaScript和CSS创建动态高亮导航栏
  • Gridspech 全通关
  • 1967
  • 20253320蒋丰任
  • .
  • 又有两位智驾大牛联手入局具身智能机器人赛道创业,已完成数亿元融资!
  • 纯国产GPU性能对比,谁才是国产算力之王?
  • 地平线明年发布并争取量产舱驾一体芯片;比亚迪补强智舱团队,斑马智行原 CTO 加入
  • 英伟达入股英特尔,当竞争对手便成协作者,真正受益的......