https://labienal.ar/js/jquery.masonryGrid.js

1/**
2* jquery-masonry-grid 1.0.0 by @ny64
3* Author: Peter Breitzler
4* URL: https://github.com/ny64/jquery-masonry-grid
5* License: MIT
6*/
7
8$.fn.masonryGrid = function(options) {
9
10    // Get options
11    var settings = $.extend({
12        columns: 3,
13        breakpoint: 767
14    }, options);
15
16    var $this = $(this),
17        currentColumn = 1,
18        i = 1,
19        itemCount = 1,
20        isDesktop = true;
21
22    // Add class to already existent items
23    $this.addClass('masonry-grid-origin');
24    $this.children().addClass('masonry-grid-item');
25
26    function createMasonry() {
27
28        currentColumn = 1;
29
30        // Add columns
31        for (columnCount = 1; columnCount <= settings.columns; columnCount++) {
32            $this.each(function() {
33                $(this).append('<div class="masonry-grid-column masonry-grid-column-' + columnCount + '"></div>');
34            });
35        }
36
37        // Add basic styles to columns
38        $this.each(function() {
39            $(this).css('display', 'flex').find('.masonry-grid-column').css('width', '100%');
40        });
41
42        $this.each(function() {
43
44            var currentGrid = $(this);
45
46            currentGrid.find('.masonry-grid-item').each(function() {
47                // Reset current column
48                if(currentColumn > settings.columns) currentColumn = 1;
49
50                // Add ident to element and put it in a column
51                $(this).attr('id', 'masonry_grid_item_' + itemCount)
52                    .appendTo(currentGrid.find('.masonry-grid-column-' + currentColumn));
53
54                // Increase current column and item count
55                currentColumn++;
56                itemCount++;
57            });
58        });
59    }
60
61    function destroyMasonry() {
62
63        // Put items back in first level of origin container
64        $this.each(function() {
65            while(i < itemCount) {
66
67                // Append item to parent container
68                $(this).find('#masonry_grid_item_' + i).appendTo($this);
69
70                i++;
71            }
72
73            // Remove columns
74            $(this).find('.masonry-grid-column').remove();
75
76            // Remove basic styles
77            $(this).css('display', 'block').find('.masonry-grid-column').css('width', 'auto');
78        });
79    }
80
81    // Call functions
82    if ($(window).width() > settings.breakpoint) {
83        isDesktop = true;
84        createMasonry();
85    } else if ($(window).width() <= settings.breakpoint) {
86        isDesktop = false;
87        destroyMasonry();
88    }
89    $(window).on('resize', function() {
90        if ($(window).width() > settings.breakpoint && isDesktop == false) {
91            isDesktop = true;
92            createMasonry();
93        } else if ($(window).width() <= settings.breakpoint && isDesktop == true) {
94            isDesktop = false;
95            destroyMasonry();
96        }
97    });
98}
99