Inline-block masonary

Developer
James Crockford
Size
4,015 Kb
Views
14,168
  1. Inline-block masonary Previews
  2. Inline-block masonary HTML Codes
  3. Inline-block masonary CSS Codes
  4. Inline-block masonary JS Codes

How do I make an inline-block masonary?

Proof of concept of a masonary style using javascript inline-block and top position, very basic so far. What is a inline-block masonary? How do you make a inline-block masonary? This script and codes were developed by James Crockford on 19 November 2022, Saturday.

Inline-block masonary Previews
IQ Test

Inline-block masonary - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inline-block masonary</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ section { max-width: 1060px; margin: auto; position: relative;
}
article { width: 33.3333%; display: inline-block; margin-left: -.25em; vertical-align: top; position: relative; font-family: Helvetica, sans-serif; color: #fff;
}
article:nth-child(1) { background-color: #f70094; height: 324px;
}
article:nth-child(1):before { content: "1"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(2) { background-color: #f00090; height: 343px;
}
article:nth-child(2):before { content: "2"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(3) { background-color: #e8008b; height: 259px;
}
article:nth-child(3):before { content: "3"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(4) { background-color: #e00087; height: 227px;
}
article:nth-child(4):before { content: "4"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(5) { background-color: #d90082; height: 219px;
}
article:nth-child(5):before { content: "5"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(6) { background-color: #d1007d; height: 481px;
}
article:nth-child(6):before { content: "6"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(7) { background-color: #c90079; height: 415px;
}
article:nth-child(7):before { content: "7"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(8) { background-color: #c20074; height: 377px;
}
article:nth-child(8):before { content: "8"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(9) { background-color: #ba0070; height: 391px;
}
article:nth-child(9):before { content: "9"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(10) { background-color: #b3006b; height: 300px;
}
article:nth-child(10):before { content: "10"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(11) { background-color: #ab0067; height: 293px;
}
article:nth-child(11):before { content: "11"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(12) { background-color: #a30062; height: 278px;
}
article:nth-child(12):before { content: "12"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(13) { background-color: #9c005d; height: 361px;
}
article:nth-child(13):before { content: "13"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(14) { background-color: #940059; height: 438px;
}
article:nth-child(14):before { content: "14"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(15) { background-color: #8c0054; height: 403px;
}
article:nth-child(15):before { content: "15"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(16) { background-color: #850050; height: 214px;
}
article:nth-child(16):before { content: "16"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(17) { background-color: #7d004b; height: 414px;
}
article:nth-child(17):before { content: "17"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(18) { background-color: #750046; height: 425px;
}
article:nth-child(18):before { content: "18"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(19) { background-color: #6e0042; height: 389px;
}
article:nth-child(19):before { content: "19"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(20) { background-color: #66003d; height: 425px;
}
article:nth-child(20):before { content: "20"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article> <article></article>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Inline-block masonary - Script Codes CSS Codes

section { max-width: 1060px; margin: auto; position: relative;
}
article { width: 33.3333%; display: inline-block; margin-left: -.25em; vertical-align: top; position: relative; font-family: Helvetica, sans-serif; color: #fff;
}
article:nth-child(1) { background-color: #f70094; height: 324px;
}
article:nth-child(1):before { content: "1"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(2) { background-color: #f00090; height: 343px;
}
article:nth-child(2):before { content: "2"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(3) { background-color: #e8008b; height: 259px;
}
article:nth-child(3):before { content: "3"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(4) { background-color: #e00087; height: 227px;
}
article:nth-child(4):before { content: "4"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(5) { background-color: #d90082; height: 219px;
}
article:nth-child(5):before { content: "5"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(6) { background-color: #d1007d; height: 481px;
}
article:nth-child(6):before { content: "6"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(7) { background-color: #c90079; height: 415px;
}
article:nth-child(7):before { content: "7"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(8) { background-color: #c20074; height: 377px;
}
article:nth-child(8):before { content: "8"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(9) { background-color: #ba0070; height: 391px;
}
article:nth-child(9):before { content: "9"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(10) { background-color: #b3006b; height: 300px;
}
article:nth-child(10):before { content: "10"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(11) { background-color: #ab0067; height: 293px;
}
article:nth-child(11):before { content: "11"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(12) { background-color: #a30062; height: 278px;
}
article:nth-child(12):before { content: "12"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(13) { background-color: #9c005d; height: 361px;
}
article:nth-child(13):before { content: "13"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(14) { background-color: #940059; height: 438px;
}
article:nth-child(14):before { content: "14"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(15) { background-color: #8c0054; height: 403px;
}
article:nth-child(15):before { content: "15"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(16) { background-color: #850050; height: 214px;
}
article:nth-child(16):before { content: "16"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(17) { background-color: #7d004b; height: 414px;
}
article:nth-child(17):before { content: "17"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(18) { background-color: #750046; height: 425px;
}
article:nth-child(18):before { content: "18"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(19) { background-color: #6e0042; height: 389px;
}
article:nth-child(19):before { content: "19"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}
article:nth-child(20) { background-color: #66003d; height: 425px;
}
article:nth-child(20):before { content: "20"; position: absolute; top: 0; left: 0; font-size: 120px; opacity: 0.2;
}

Inline-block masonary - Script Codes JS Codes

function Sol( options ){ var defaults = { el: "article" }, groups; this.opts = $.extend( defaults, options ); //cache a jquery wrapped el this.opts.$el = $( this.opts.el ); //determine rowCount if not set this.opts.rowCount = ( typeof this.opts.rowCount === 'undefined' ) ? this.getRowCount( this.opts.$el ) : this.opts.rowCount; groups = this.group( $( this.opts.el ), this.opts.rowCount ); for( var i = 0; i<groups.length; i++ ){ var top = 0; for( var k = 0; k<groups[i].length; k++ ){ top = this.stack( groups[i][k], top ); } }
}
Sol.prototype = { /** * determine how many items on first row * * @param {object} $el - jquery wrapped collection of elements * @return {number} - how many items are on the first row */ getRowCount: function( $el ){ return $el.map( function() { if( $(this).position().top <= 0 ) return this; }).length; }, /** * splits array into a matrix of items * * @param {array} collection - items to split * @param {number} grouping - how many groupings should be made * @return {array} */ group: function( collection, grouping ){ var groups = [], count = 0; for ( var i=0; i<collection.length; i++ ) { if( typeof groups[ count ] === 'undefined' ) groups[ count ] = []; groups[ count ].push( collection[i] ); count = ( count >= ( grouping - 1 ) ) ? 0 : ++count; } return groups; }, /** * stacks items using top * * @param {node} item * @param {number} top */ stack: function( item, top ){ var height = $( item ).position().top - top; top = top + item.offsetHeight; item.style.top = -height + "px"; return top; }
}
new Sol({ el: "article"
});
Inline-block masonary - Script Codes
Inline-block masonary - Script Codes
Home Page Home
Developer James Crockford
Username james_crockford
Uploaded November 19, 2022
Rating 3
Size 4,015 Kb
Views 14,168
Do you need developer help for Inline-block masonary?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Crockford (james_crockford) Script Codes
Name
Circular Profile
Vim logo animated
Yank
Move
CSS breakpoints in JS
Hexagon switch
A Pen by James Crockford
Parallax background
Keys
Glow loading
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!