DATA-COLUMNS

ABOUT.md

For more information about this project, follow this link.

gistfile1.js

// DATA-COLUMNS by Rolando Murillo (@rnmp)
// and Giorgio Leveroni (@ppold)

var grids = document.querySelectorAll('[data-columns]');
[].forEach.call(grids, function(grid) {
    var columns     = grid.dataset.columns,
        columnClass = '_col',
        itemClass   = '_item',
        elements    = [];
    
    for (var i = columns - 1; i >= 0; --i) {
        elements.push(grid.querySelectorAll('.'+itemClass+':nth-child('+columns+'n-'+i+')'));
    }
    
    elements.forEach(function(columnElements) {
        var column = document.createElement('div');
        column.classList.add(columnClass);
        
        Array.prototype.forEach.call(columnElements, function(element) {
            column.appendChild(element);
        });
        
        grid.appendChild(column);
    });
});

[].forEach is faster than Array.prototype.forEach according to: http://jsperf.com/foreach-vs-array-prototype-foreach

Actually storing the forEach function in a variable is the fastest (using the same link you mentioned).

P.S. I'll implement the responsive support and the addition/deletion of content next week.