一,官网
官网:
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>