Image element Grid Layout plugin based on jquery

The jquery image element Grid Layout plug-in is a jquery plug-in jmosaic that arranges image or HTML elements evenly across a grid layout. As follows:

Online preview Source Download

The implemented code.

HTML code:

<Center><H3>Demo 1</H3></Center><Divclass= "Pictures">    <imgsrc= "Img/pics-001.jpg"width= "All"Height= "519">    <imgsrc= "Img/pics-002.jpg"width= "The "Height= "327">    <imgsrc= "Img/pics-003.jpg"width= " the"Height= "473">    <imgsrc= "Img/pics-004.jpg"width= "All"Height= "529">    <imgsrc= "Img/pics-005.jpg"width= " the"Height= "472">    <imgsrc= "Img/pics-006.jpg"width= "The "Height= "467">    <imgsrc= "Img/pics-007.jpg"width= "All"Height= "573">    <imgsrc= "Img/pics-008.jpg"width= "$"Height= "669">    <imgsrc= "Img/pics-009.jpg"width= "460"Height= "1635">    <imgsrc= "Img/pics-010.jpg"width= "The "Height= "321">    <imgsrc= "Img/pics-011.jpg"width= "All"Height= "533">    <imgsrc= "Img/pics-012.jpg"width= "The "Height= "The ">    <imgsrc= "Img/pics-013.jpg"width= "All"Height= "823"></Div><BR><Center><H3>Demo 2</H3></Center><ulclass= "Blocks">    <Listyle= "width:250px; height:400px; background: #ff0000; list-style:none;"></Li>    <Listyle= "width:250px; height:200px; background: #ffff00; list-style:none;"></Li>    <Listyle= "width:450px; height:235px; background: #000000; list-style:none;"></Li>    <Listyle= "width:550px; height:500px; background: #00ff00; list-style:none;"></Li>    <Listyle= "width:700px; height:300px; background: #00ffff; list-style:none;"></Li>    <Listyle= "width:213px; height:458px; background: #ff00ff; list-style:none;"></Li>    <Listyle= "width:710px; height:170px; background: #aa77cc; list-style:none;"></Li>    <Listyle= "width:350px; height:350px; background: #bb1100; list-style:none;"></Li>    <Listyle= "width:250px; height:400px; background: #ff0000; list-style:none;"></Li></ul>

CSS code:

Body, HTML{padding:0;margin:0;}a{Color:#3366CC;}. Wrapper{width:900px;margin:0 Auto;Font:Normal Normal 100%/1.5em Georgia, serif;Color:#222;}. Wrapper H1{Font:normal 600%/100% Georgia, serif;Text-shadow:0-1px 1px rgba (255, 255, 255, 0.01);margin:0 0 5px 0;text-align:Center;}. Wrapper H2{Font:normal 200%/100% Georgia, serif;Text-shadow:0-1px 1px rgba (255, 255, 255, 0.01);margin:0 0 5px 0;Text-transform:Uppercase; }. Wrapper H3{Font:normal 150%/100% Georgia, serif;Text-shadow:0-1px 1px rgba (255, 255, 255, 0.01);margin:0 0 5px 0;}. Wrapper HR{Border:None;Border-top:1px solid #ddd;}. Head P{Font:normal 145%/1em Georgia, serif;Text-shadow:0-1px 1px rgba (255, 255, 255, 0.01);text-align:Center;}. Buttons a{Display:Inline-block;background:#ddd;Color:#111;width:39.5%;margin:0 5%;Border-radius:3px;text-align:Center;Line-height:2.6em;text-decoration:None;}. Buttons A:hover{background:#3366CC;Color:#fff;}. Buttons{Clear:both;margin:5px 0px 20px 0px; }. Wrapper Pre{Font:normal 87.5%/1.2em monospace, Sans-serif;padding:15px 30px 0px 30px;margin:0;background:#eee;Border-radius:3px;Display:Block;Overflow:Auto;}. Pictures{margin:0px Auto;width:870px;padding:0;}. Blocks{margin:0px Auto;width:70%;padding:0;}

via:http://www.w2bc.com/article/43290

Image element Grid Layout plugin based on jquery