See New TB
Image Gallery
*
You are here:
Iris Wiki
>
System Web
>
JQueryPlugin
>
JQueryMasonry
(18 Nov 2019,
ProjectContributor
)
(raw view)
Edit
Attach
---+ %TOPIC% %JQPLUGINS{"masonry" format=" Homepage: $homepage <br /> Author(s): $author <br /> Version: $version " }% %STARTSECTION{"summary"}% Masonry is a <nop>JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You've probably seen it in use all over the Internet. %ENDSECTION{"summary"}% ---++ Screenshot <img src="%ATTACHURL%/jQuery-Masonry.jpg" alt="jQuery-Masonry.jpg" width="547" height="351" /> ---++ Usage ---+++ <nop>JavaScript API Configuring Masonry is fairly easy. Simply attach the =.masonry()= method to the wrapping container element in your jQuery script. Depending on the layout, you’ll most likely need to specify one option. For layouts with elements that span multiple widths: <verbatim class="js"> $('#wrapper').masonry({ columnWidth: 200 }); </verbatim> ---+++ Foswiki integration All containers classified as =jqMasonry= will be processed by this plugin. Options can be specified using HTML5 data attributes. <verbatim class="tml"> <div class="jqMasonry" data-item-selector=".grid-item"> <div class="grid-item">...</div> <div class="grid-item">...</div> <div class="grid-item">...</div> ... </div> </verbatim> ---++ Options All options are optional, but columnWidth and itemSelector are recommended. * =columnWidth: 240= %BR% Width of a column of your grid, specified as an integer, an element selector, or a dom node. default: outer width of the first element of the grid * =itemSelector: '.grid-item'= %BR% selector to specify which elements inside the wrapping element will be rearranged. * =gutter: 0= %BR% Adds horizontal between item elements (to set vertical space between elements use css margin), specified as an integer or an element selector * =percentPosition: false= %BR% if set to =true= integer values in =columnWidth= and =gutter= will be in percentage instead of in pixel * =stamp: 'item selector'= %BR% Specifies which elements are stamped within the layout. Masonry will layout items below stamped elements. * =isFitWidth: false= %BR% If enabled, Masonry will size the width of the container to the nearest column. When enabled, Masonry will measure the width of the container's parent element, not the width of the container. This option is ideal for centering Masonry layouts. * =isOriginLeft: true= %BR% Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with =isOriginLeft: true=. Set =isOriginLeft: false= for right-to-left layouts. * =isOriginTop: true= %BR% Controls the vertical flow of the layout. By default, item elements start positioning at the top, with =isOriginTop: true=. Set =isOriginTop: false= for bottom-up layouts. It's like Tetris! * =containerStyle: {position:relative}= %BR% CSS styles that are applied to the container element, set to =null= to disable any css * =transitionDuration: '0.4s'= Duration of the transition when items change position or appearance, set in a CSS time format. * =isResizeBound: true= %BR% Adjusts sizes and positions when window is resized. * =isInitLayout: true= %BR% Set isInitLayout: false to disable layout on initialization, so you can use methods or add events before the initial layout. ---++ Examples %JQREQUIRE{"Masonry"}% See more demos at http://masonry.desandro.com/ <div class="jqMasonry" data-percent-position="true" data-gutter="2" data-column-width="23"> <div class="box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </div> <div class="box"> Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </div> <div class="box"> Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </div> <div class="box"> Sit amet mi ullamcorper vehicula </div> <div class="box"> adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. </div> <div class="box"> Sit amet mi ullamcorper vehicula </div> <div class="box"> Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. </div> <div class="box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </div> <div class="box"> Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </div> <div class="box"> Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula </div> <div class="box"> Sit amet mi ullamcorper vehicula </div> <div class="box"> adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. </div> <div class="box"> Sit amet mi ullamcorper vehicula </div> <div class="box"> Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. </div> </div> <literal> <style> .box { margin-bottom:1em; padding: 0.5em; box-sizing:border-box; width:23%; background: #D8D5D2; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; } </style> </literal>
E
dit
|
A
ttach
|
P
rint version
|
H
istory
: r1
|
B
acklinks
|
V
iew topic
|
Edit
w
iki text
|
M
ore topic actions
Topic revision: r1 - 18 Nov 2019,
ProjectContributor
System
Log In
Register
Toolbox
Users
Groups
Index
Search
Changes
Notifications
RSS Feed
Preferences
User Reference
BeginnersStartHere
EditingShorthand
Macros
MacrosQuickReference
FormattedSearch
QuerySearch
DocumentGraphics
SkinBrowser
InstalledPlugins
Admin Maintenance
Reference Manual
AdminToolsCategory
InterWikis
ManagingWebs
SiteTools
DefaultPreferences
WebPreferences
Categories
AdminDocumentationCategory
AdminToolsCategory
DeveloperDocumentationCategory
UserDocumentationCategory
UserToolsCategory
Webs
Ab
Ar
Bb
Gdn
Hist
Ib
Ird
Ji
La
Main
Bio
Mdb
Spx
Mtb
Pcn
Sandbox
Sdb
Sib
Spec
Spu
System
TbAthruE
TbFthruJ
TbKthruO
TbPthruT
TbUthruZ
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Iris Wiki?
Send feedback