Tres maneras súper fáciles de llevar a cabo un diseño de mampostería

Los diseños de estilo de mampostería empujan los límites de las técnicas de diseño creativo. Personalmente, me encanta lo capaces que son para maximizar la eficiencia de las galerías que contienen artículos con diferentes alturas. Se utiliza cada espacio de pantalla y el resultado puede ser absolutamente fascinante.

Hoy vamos a sumergirnos en el concepto, las ideas y las técnicas populares que prevalecen actualmente en los diseños de estilo de mampostería. Aprenderemos tres métodos diferentes para llevar a cabo un diseño de mampostería, analizaremos los entresijos de cada uno y nos aseguraremos de que el resultado sea bellamente sensible y que el flujo se base en el ancho del navegador.

¿Qué es un diseño de mampostería?

Cuando flota objetos en CSS, el navegador organiza los elementos primero horizontalmente y luego verticalmente. Cuando llenamos un contenedor con un montón de objetos de igual tamaño y los dejamos flotar hacia la izquierda, obtenemos una buena cuadrícula de imágenes.

Sin embargo, si los objetos tienen alturas variables, los resultados son mucho más difíciles de predecir. En lugar de una cuadrícula estrecha y agradable, obtenemos algo que tiende a estar bastante disperso.

El dilema obvio aquí es cómo lograr una cuadrícula estrecha y bonita que tenga elementos que tengan alturas variables. Es un tema bastante interesante y varios desarrolladores han encontrado varias maneras de hacerlo. Echemos un vistazo a tres de las mejores soluciones actuales.

Para ir un paso más allá, nos aseguraremos de que las tres soluciones respondan, lo que significa que la cuadrícula se volverá a generar a medida que cambie el tamaño de la ventana.

jQuery Masonry

jQuery Masonry es la solución más popular para llevar a cabo este tipo de diseño. Utiliza un JavaScript bastante elegante para hacer que una serie de divs fluyan.

Poner en práctica la Masonería es bastante fácil, todo lo que necesita es un contenedor que contenga una serie de divs que desee organizar al estilo de mampostería. Puedes colocar lo que quieras dentro de los divs, en este caso, lancé algunas imágenes de marcadores de posición.

Una vez que tengas eso en orden, tira jQuery y jQuery Masonry. Luego, debe crear una función simple que identifique su contenedor y se dirija a la clase que usamos para nuestros divs de imágenes de Masonería. Aquí hay un ejemplo básico:

<img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_4.jpg"> <h2>Wookmark</h2> <img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_5.jpg"> <p>Otra solución popular de JavaScript para lograr el mismo tipo de diseño es Wookmark.js, que es el complemento de manejo detrás de Wookmark.com, similar a Pinterest.</p> <p>Wookmark.js es, en mi opinión, un poco más difícil de implementar que jQuery Masonry debido a la falta de documentación, pero sigue siendo algo bastante básico. Todo lo que tenemos que hacer para comenzar es tirar un montón de imágenes en una lista desordenada. El problema con este complemento es que tenemos que declarar los valores de altura en línea para cada una de las imágenes.</p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_6.jpg"> <h2>CSS puro</h2> <p>Las soluciones de JavaScript son probablemente las formas más seguras y compatibles para realizar un diseño de mampostería, pero el nerd de CSS en mí sabía que tenía que haber una manera de hacerlo sin JavaScript.</p> <p>Resulta que, en realidad, es bastante fácil usar algunos CSS3 de fantasía. Esta técnica fue desarrollada por Radu Chelariu en SickDesigner y aunque definitivamente no es tan potente, flexible o compatible con el navegador como las opciones anteriores, sigue siendo extremadamente impresionante dado que todo es CSS.</p> <p>Para comenzar, usemos la misma lista desordenada que hicimos la última vez (no se necesitan estilos en línea), arrojados a un div contenedor. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_7.jpg"> <h2>Conclusión</h2> <p>En un artículo reciente en Pinterest, comenté cuán poderosos pueden ser los diseños de mampostería desde una perspectiva de UX, especialmente cuando se combinan con el desplazamiento infinito.</p> <p>Definitivamente, puede esperar que esta tendencia incipiente aumente en popularidad y antes de que se dé cuenta tendrá clientes que solicitan un diseño como el que ven en Pinterest. Cuando esto suceda, ahora estará preparado con no una, sino tres soluciones posibles.</p></li></ul>