jQuery Gridly nos permite crear una rejilla de elementos personalizados que podemos re-ordenar fácilmente simplemente arrastrando los elementos a la posición deseada, crear nuevos y eliminar los existentes es muy fácil y la forma de implementarlo también lo es.
Simplemente tenemos que añadir la libreria jquery-gridly a nuestra pagina, junto con jquery si no lo tenemos ya:
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.gridly.js" type="text/javascript"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" /> |
El uso es muy sencillo y con este simple ejemplo que encontramos en su pagina es muy facil de entender:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style type="text/css"> .gridly { position: relative; width: 960px; } .brick.small { width: 140px; height: 140px; } .brick.large { width: 300px; height: 300px; } </style> <div class="gridly"> <div class="brick small"></div> <div class="brick small"></div> <div class="brick large"></div> <div class="brick small"></div> <div class="brick small"></div> <div class="brick large"></div> </div> <script> $('.gridly').gridly({ base: 60, // px gutter: 20, // px columns: 12 }); </script> |
Demo y descarga: http://ksylvest.github.io/jquery-gridly/