{"id":6702,"date":"2017-07-24T12:16:26","date_gmt":"2017-07-24T10:16:26","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=6702"},"modified":"2017-07-25T12:19:52","modified_gmt":"2017-07-25T10:19:52","slug":"masonry-la-estructura-moda","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/","title":{"rendered":"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla?"},"content":{"rendered":"

Hola, \u00a1bienvenidos a un nuevo post de la escuela espai! Hoy veremos\u00a0una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastante de que hablar: el estilo masonry<\/em><\/strong>.<\/p>\n

\u00bfEn qu\u00e9 consiste el estilo masonry<\/em>?<\/h2>\n

El estilo masonry\u00a0<\/em><\/strong>consiste en aprovechar los espacios que se crean cuando se combinan cajas con distintas alturas. Provocando as\u00ed una construcci\u00f3n tipo \u00abbloque de ladrillos\u00bb de ah\u00ed el nombre masonry<\/em><\/strong>. Quiz\u00e1 no me haya explicado bien, pero lo entender\u00e9is perfectamente con las siguientes im\u00e1genes:<\/p>\n

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

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

\u00bfCapt\u00e1is la idea? Es muy sencilla. Se trata de aprovechar todos los espacios vac\u00edos, adapt\u00e1ndose a las distintas alturas de las cajas. Seguramente habr\u00e9is reconocido esta estructura porque se populariz\u00f3 mucho sobre todo a ra\u00edz de los blogs creados en Tumblr<\/a>.\u00a0<\/em><\/strong>A partir de entonces se ha utilizado en millones de webs. Especialmente en aquellas que muestran distintos elementos de portfolio o galer\u00edas de im\u00e1genes, ya que es una manera fant\u00e1stica\u00a0y muy visual de presentar distintos elementos sin desaprovechar espacios en nuestra pantalla.<\/p>\n

\u00bfC\u00f3mo se construye?<\/h2>\n

La idea b\u00e1sica es tener en cuenta el height<\/em> de un elemento\u00a0e inmediatamente colocar el siguiente despu\u00e9s . Si entendemos c\u00f3mo funcionan los elementos en bloque sabr\u00e9is que estos\u00a0no permiten que nada invada su espacio ni horizontal ni verticalmente. Por ello las cajas de una construcci\u00f3n masonry<\/strong><\/em> tienen que contar con la propiedad float<\/em><\/strong> y adem\u00e1s estar en posici\u00f3n absoluta<\/strong>. De lo contrario no se podr\u00edan aprovechar los espacios verticales que se crean entre las distintas cajas.<\/p>\n

As\u00ed que tenemos que tener en cuenta la altura y la anchura de cada bloque y sum\u00e1rselo a las propiedades top<\/em> y left<\/em> del siguiente. Hacer esto de forma manual es complicado. \u00a0Pero contamos con un potente plugin de jQuery que automatiza esta tarea.<\/p>\n

Podemos bajar este plugin en su web oficial:\u00a0https:\/\/masonry.desandro.com\/<\/a>.<\/p>\n

Instalarlo es muy sencillo.<\/p>\n

Enlazamos el archivo con la etiqueta <script>. Ejemplo:<\/p>\n

<script src=\u00bbmasonry.pkgd.min.js\u00bb><\/script><\/p>\n

O\u00a0simplemente copiar el siguiente cdn en la etiqueta <head>:<\/p>\n

<script<\/span> src<\/span>=\u00abhttps:\/\/unpkg.com\/masonry-layout@4\/dist\/masonry.pkgd.min.js\u00bb<\/span>><\/span><\/script<\/span>><\/span><\/p>\n

(No olvidemos enlazar tambi\u00e9n la librer\u00eda de jQuery de lo contrario no funcionar\u00e1, pod\u00e9is instalarla copiando este otro cdn).<\/p>\n

<script src=\u00bbhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\u00bb><\/script><\/p>\n

Ahora s\u00f3lo nos queda crear la estructura con HTML, darle un par de reglas CSS e iniciarlo con jQuery.<\/p>\n

Lo \u00fanico que necesitamos es crear un contenedor con alguna clase y unas cajas dentro con la propiedad css \u00abfloat:left<\/em>\u00ab.\u00a0<\/em> Eso es todo. \u00a0Luego tendremos que llamar a estas clases con jQuery como en el siguiente ejemplo:<\/p>\n

<script><\/code>
\n $(function(){<\/code>
\n\u00a0 \u00a0$('.grid').masonry({<\/code>
\n\u00a0 \u00a0\/\/ options<\/code>
\n\u00a0 \u00a0 \u00a0 itemSelector: '.griditem',<\/code>
\n\u00a0 \u00a0 \u00a0 columnWidth: 10<\/code>
\n\u00a0 \u00a0});<\/code>
\n });<\/code>
\n <\/script><\/code><\/p>\n

Pod\u00e9is leer la documentaci\u00f3n de este plugin en su p\u00e1gina oficial. Cuenta con numerosas opciones para personalizar las rejillas masonry<\/em><\/strong>. Ver\u00e9is como con pocas l\u00edneas de c\u00f3digo podr\u00e9is crear estructuras incre\u00edbles y totalmente responsive.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hola, \u00a1bienvenidos a un nuevo post de la escuela espai! Hoy veremos\u00a0una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastante de que hablar: el estilo masonry. \u00bfEn qu\u00e9 consiste el estilo masonry?…<\/p>\n","protected":false},"author":26,"featured_media":6722,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8,7,4,390],"tags":[],"class_list":["post-6702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-grafico","category-diseno-web","category-internet","category-redes-sociales"],"yoast_head":"\nMasonry: la estructura de moda. \u00bfC\u00f3mo construirla? - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Hoy veremos una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastente de que hablar: el estilo masonry.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla? - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Hoy veremos una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastente de que hablar: el estilo masonry.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-24T10:16:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-07-25T10:19:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"406\" \/>\n\t<meta property=\"og:image:height\" content=\"594\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Paco Luque\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paco Luque\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\"},\"author\":{\"name\":\"Paco Luque\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"headline\":\"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla?\",\"datePublished\":\"2017-07-24T10:16:26+00:00\",\"dateModified\":\"2017-07-25T10:19:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\"},\"wordCount\":535,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg\",\"articleSection\":[\"Dise\u00f1o Gr\u00e1fico\",\"Dise\u00f1o Web\",\"Internet\",\"Redes Sociales\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\",\"name\":\"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla? - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg\",\"datePublished\":\"2017-07-24T10:16:26+00:00\",\"dateModified\":\"2017-07-25T10:19:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\"},\"description\":\"Hoy veremos una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastente de que hablar: el estilo masonry.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg\",\"width\":406,\"height\":594},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725\",\"name\":\"Paco Luque\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g\",\"caption\":\"Paco Luque\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/paco\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla? - Blog Escola Espai","description":"Hoy veremos una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastente de que hablar: el estilo masonry.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/","og_locale":"es_ES","og_type":"article","og_title":"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla? - Blog Escola Espai","og_description":"Hoy veremos una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastente de que hablar: el estilo masonry.","og_url":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/","og_site_name":"Blog Escola Espai","article_published_time":"2017-07-24T10:16:26+00:00","article_modified_time":"2017-07-25T10:19:52+00:00","og_image":[{"width":406,"height":594,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg","type":"image\/jpeg"}],"author":"Paco Luque","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Paco Luque","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/"},"author":{"name":"Paco Luque","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"headline":"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla?","datePublished":"2017-07-24T10:16:26+00:00","dateModified":"2017-07-25T10:19:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/"},"wordCount":535,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg","articleSection":["Dise\u00f1o Gr\u00e1fico","Dise\u00f1o Web","Internet","Redes Sociales"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/","url":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/","name":"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla? - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg","datePublished":"2017-07-24T10:16:26+00:00","dateModified":"2017-07-25T10:19:52+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725"},"description":"Hoy veremos una forma de estructurar webs que se puso de moda hace algunos a\u00f1os y que, a d\u00eda de hoy, sigue dando bastente de que hablar: el estilo masonry.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg","width":406,"height":594},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2017\/07\/masonry-la-estructura-moda\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Masonry: la estructura de moda. \u00bfC\u00f3mo construirla?"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/2147604b486e1347f6e764b0d3964725","name":"Paco Luque","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1f139c1b28c03e6963f4e701f000714729510b27ec31d7ff3fd8019fde1330fd?s=96&d=mm&r=g","caption":"Paco Luque"},"url":"https:\/\/www.espai.es\/blog\/author\/paco\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2017\/07\/bz1v9.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=6702"}],"version-history":[{"count":14,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6702\/revisions"}],"predecessor-version":[{"id":6723,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/6702\/revisions\/6723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/6722"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=6702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=6702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=6702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}