可拖拽的jQuery瀑布流插件

HTML结构

<div class="rimg">
    <div class="gallery" id="tiless" role="tiless">
        <div id="sortable">
            <div class="file_p">
                <img src="img/1.png" />
            </div>
            <div class="file_p">
                <img src="img/2.png" />
            </div>
            <div class="file_p">
                <img src="img/a3.png" />
            </div>
            <div class="file_p">
                <img src="img/a4.png" />
            </div>
            <div class="file_p">
                <img src="img/a5.png" />
            </div>
            <div class="file_p">
                <img src="img/1.png" />
            </div>
            <div class="file_p">
                <img src="img/2.png" />
            </div>
            <div class="file_p">
                <img src="img/a3.png" />
            </div>
            <div class="file_p">
                <img src="img/a4.png" />
            </div>
            <div class="file_p">
                <img src="img/a5.png" />
            </div>
        </div>
    </div>
</div>

JS核心代码

<script type="text/javascript">
    //拖拽插件调用
    $(document).ready(function() {
        $("#sortable").shapeshift();
    })

    //瀑布流插件调用
    function waterfall() {
        var handler = $('.rimg #sortable>div');
        handler.wookmark({
            // Prepare layout options.
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#tiless #sortable'), // Optional, used for some extra CSS styling
            offset: 5, // Optional, the distance between grid items
            outerOffset: 10, // Optional, the distance to the containers border
            itemWidth: 240 // Optional, the width of a grid item
        });
    }

    $('.rimg #sortable').imagesLoaded(waterfall);
</script>
更新时间 2020-04-19 09:41:27,本资源已通过Awesomes审核检验,请放心使用!
如下载遇到问题,请联系客服解决
下载地址
此插件下载需要3A币,请登录后进行下载。
请文明评论,与人为善,比聪明更重要!
评论