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>

三，测试效果: