ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

jquery: Justified gallery

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

返回列表