{"id":6017,"date":"2013-06-13T20:35:00","date_gmt":"2013-06-13T20:35:00","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6017"},"modified":"2013-06-13T21:30:43","modified_gmt":"2013-06-13T21:30:43","slug":"blocksit-jquery-dynamic-grid-layout","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/","title":{"rendered":"Blocksit jQuery Dynamic Grid Layout"},"content":{"rendered":"

Te interesa disponer del sistema de visiualizaci\u00f3n de los bloques al estilo Pinterest<\/strong>? BlocksIt es un plugin jQuery para la creaci\u00f3n de dise\u00f1o din\u00e1mico de una p\u00e1gina Web. Se las arregla para convertir los elementos HTML en \u00abbloques\u00bb y colocarlos en el dise\u00f1o de la p\u00e1gina organiz\u00e1ndolo al estilo Pinterest, una de las web m\u00e1s populares hoy en d\u00eda =). \u00bfC\u00f3mo? Bueno, simplemente espec\u00edfica el n\u00famero de columnas que desea tener y BlocksIt.js har\u00e1 el resto por ti pudiendo obtener resultados como el siguiente:<\/p>\n

\"blocklit\"<\/a><\/p>\n

Implementar este tipo de Webs con bloques autoajustables al estilo Pinteresc es muy sencillo utilizando el plugin jQuery BlocksIt.<\/p>\n

En el <head> de nuestra p\u00e1gina deberemos a\u00f1adir la librer\u00eda jQuery + la llamada al plugin:<\/p>\n

<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js\"><\/script>\r\n<script src=\"..\/blocksit.min.js\"><\/script>\r\n<script>\r\n$(document).ready(function() {\r\n\u00a0\u00a0 \u00a0$('#content').BlocksIt({\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0numOfCol: 3,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0offsetX: 8,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0offsetY: 8\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n<\/script><\/pre>\n
En este caso estamos definiendo un bloque de contenido din\u00e1mico con unos m\u00e1rgenes de 8px y 3 columnas.<\/p>\n
Dentro del <body> tendremos el contenedor con los bloques o elementos:<\/p>\n
<div id=\"content\">\r\n\u00a0\u00a0 \u00a0<div class=\"grid\">\r\n      <!--YOUR CONTENT BLOCK-->\r\n    <\/div>\r\n    <div class=\"grid\"> \r\n       <!--YOUR CONTENT BLOCK--> \r\n    <\/div>\r\n    ...\r\n<\/div><\/pre>\n
El contenedor con id=\u00bbcontent\u00bb es el elemento padre al cual se le aplicar\u00e1 la funci\u00f3n Blocksit para aplicar y dentro de este habr\u00e1 otros contenedores con class=\u00bbgrid\u00bb, los cuales ser\u00e1n los que se autoajustar\u00e1n seg\u00fan su altura en las columnas.<\/p>\n
Dentro de cada bloque puedes introducir cualquier tipo de contenido HTML: im\u00e1genes, video, listas, texto…<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n
Si te ha servido este tutorial hazte fan de la p\u00e1gina de facebook del blog Jose Aguilar<\/a> o s\u00edguenos a trav\u00e9s de Twitter<\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"
Te interesa disponer del sistema de visiualizaci\u00f3n de los bloques al estilo Pinterest? BlocksIt es un plugin jQuery para la creaci\u00f3n de dise\u00f1o din\u00e1mico de una p\u00e1gina Web. Se las arregla para convertir los elementos HTML en \u00abbloques\u00bb y colocarlos en el dise\u00f1o de la p\u00e1gina organiz\u00e1ndolo al estilo Pinterest, una de las web m\u00e1s […]<\/p>\n","protected":false},"author":1,"featured_media":6019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[74],"class_list":["post-6017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-contenedores"],"yoast_head":"\nBlocksit jQuery Dynamic Grid Layout - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blocksit jQuery Dynamic Grid Layout - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Te interesa disponer del sistema de visiualizaci\u00f3n de los bloques al estilo Pinterest? BlocksIt es un plugin jQuery para la creaci\u00f3n de dise\u00f1o din\u00e1mico de una p\u00e1gina Web. Se las arregla para convertir los elementos HTML en \u00abbloques\u00bb y colocarlos en el dise\u00f1o de la p\u00e1gina organiz\u00e1ndolo al estilo Pinterest, una de las web m\u00e1s […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-13T20:35:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-06-13T21:30:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png\" \/>\n\t<meta property=\"og:image:width\" content=\"450\" \/>\n\t<meta property=\"og:image:height\" content=\"286\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/\",\"name\":\"Blocksit jQuery Dynamic Grid Layout - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png\",\"datePublished\":\"2013-06-13T20:35:00+00:00\",\"dateModified\":\"2013-06-13T21:30:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png\",\"width\":450,\"height\":286},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocksit jQuery Dynamic Grid Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Blocksit jQuery Dynamic Grid Layout - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Blocksit jQuery Dynamic Grid Layout - Jose Aguilar Blog","og_description":"Te interesa disponer del sistema de visiualizaci\u00f3n de los bloques al estilo Pinterest? BlocksIt es un plugin jQuery para la creaci\u00f3n de dise\u00f1o din\u00e1mico de una p\u00e1gina Web. Se las arregla para convertir los elementos HTML en \u00abbloques\u00bb y colocarlos en el dise\u00f1o de la p\u00e1gina organiz\u00e1ndolo al estilo Pinterest, una de las web m\u00e1s […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-06-13T20:35:00+00:00","article_modified_time":"2013-06-13T21:30:43+00:00","og_image":[{"width":450,"height":286,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/","url":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/","name":"Blocksit jQuery Dynamic Grid Layout - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png","datePublished":"2013-06-13T20:35:00+00:00","dateModified":"2013-06-13T21:30:43+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/06\/BlocksIt-jQuery-Plugin-450x286.png","width":450,"height":286},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/blocksit-jquery-dynamic-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Blocksit jQuery Dynamic Grid Layout"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6017"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6017\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6019"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}