![]() Not a secret actually, some people have already written about it. Later on, I got success with it using some rarely-used CSS properties. All I got was equal-height columns, which is definitely not a masonry. Not exactly tables, but the table display properties. This is what a masonry pattern looks like I started off by using CSS floats, then tried inline-blocks, ended up in a messed up layout with tables. How about doing pure CSS masonry layouts?īefore moving any further, I have some updates for you about my experiments with CSS masonry:Īfter the launch of Pinterest in 2011, I myself tried creating its lookalike with plain CSS. We already have some solid JavaScript alternatives out there to create masonry layouts. ![]() Pinterest has inspired many to do masonry-based layouts on their sites. This allows for developers to specify selectors that can’t be deleted from the settings page, and for programmaticly building selectors based on dynamic data.Published on Maby Rahul Simple yet beautiful pure CSS Masonry layouts Creating a Responsive Pure CSS Masonry Layout This filter operates on the array of data that gets passed to the JS right before it is passed. You can trigger the event like this: jQuery( window ).trigger( 'equalheights' ) Īnother option for controlling which elements get equalized is the equal_height_columns_elements filter. This is useful if you have added new items to the page after it loads via AJAX. When entering a selector on the settings page or using the initEqualHeights() method this plugin also adds an event ‘equalheights’ to the window, allowing you to easily trigger the equalizing manually. So an example might look like this: jQuery( '.selector' ).initEqualHeights( 200, 500, 768 ) ![]() The difference between these two functions is simply that initEqualHeights() will set up all the events for recalculating the heights when the window is resized or the global equalheights event is triggered, but equalizeTheHeights() will simply equalize the heights without involving any events.īoth functions take three optional arguments, the minimum height (number of pixels), maximum height, and the breakpoint (below which the heights will revert to their original size): jQuery( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint ) JQuery( '.selector' ).equalizeTheHeights() You can skip entering a selector on the settings page and call the jQuery script yourself using one of two functions: jQuery( '.selector' ).initEqualHeights() Want to trigger the equalizing of the heights manually? No problem. Add/remove column groups by clicking the “+ Add More” and “Remove” buttons.Enter a selector and breakpoint for the first column group.Navigate to Settings > Equal Height Columns in the WordPress admin.Trigger custom ‘equalheight’ event to force resize. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |