Cree fácilmente diseño dinámico de cuadrícula con FreeWall

Si está familiarizado con Windows 8 o Pinterest, ya conoce el diseño dinámico de la cuadrícula. Una cuadrícula dinámica es un diseño en el que puede reorganizar y reubicar los elementos secundarios según sea necesario o cuando tenga su navegador redimensionado. Un popular plugin jQuery utilizado para crear este diseño es jQuery Masonry, pero si quieres más opciones e incluso animaciones, echa un vistazo a FreeWall.

FreeWall es un plugin jQuery gratuito de Minh Nguyen que puedes usar para crear muchos tipos de disposición de grillas : diseño flexible, diseño de estilo metro, grillas anidadas, diseño de imagen y grilla fluida. También tiene soporte para un diseño receptivo para que pueda mostrar su sitio en el escritorio, móvil o tableta.

Además de eso, también tiene muy buenas animaciones CSS y eventos de devolución de llamada como onGapFound, onComplete, onResize y onSetBlock.

Empezando

Para comenzar con FreeWall, debe incluir el marco jQuery o Zepto. En esta guía básica, vamos a usar jQuery como ejemplo para hacer una demostración de diseño de cuadrícula normal.

Ahora vamos a incluir primero el framework jQuery y el plugin FreeWall con el siguiente código.

Mostraremos algunas piezas de ladrillo para el contenedor del diseño.

Rejilla normal 

Y defina nuestros tamaños de ladrillo con los valores de width y height de 320px usando la regla de estilo a continuación:

 .size320 {ancho: 320px; altura: 320px; } 

Ahora, para agregar un código de JavaScript.

Hazlo funcionar

Para dar colores aleatorios a los ladrillos, definiremos algunos arreglos de color y los aplicaremos a los ladrillos usando el método Math.random() esa manera.

 var color = ["rgb (142, 68, 173)", "rgb (243, 156, 18)", "rgb (211, 84, 0)", "rgb (0, 106, 63)", "rgb (41, 128, 185) ", " rgb (192, 57, 43) ", " rgb (135, 0, 0) ", " rgb (39, 174, 96) "]; $ (". free-wall .size320"). each (function () {var backgroundColor = color [colour.length * Math.random () << 0]; var bricks = $ (this) .find (". brick ");! bricks.length && (bricks = $ (this)); bricks.css ({backgroundColor: backgroundColor});}); 

Por último, vamos a agregar funciones para que la presentación se muestre bien. Esto es lo que hace que FreeWall sea genial. Tiene algunas opciones y métodos para controlar el comportamiento de la grilla. Las opciones que ofrece FreeWall son:

 animado: verdadero, // verdadero para hacer que el bloque se mueva con la animación. block.flex: true, // True to made block puede cambiar el tamaño de un bit para que quepa. cell.width: number, cell.height: number, fillGap: true, // True hará el diseño sin brecha. Gutter: mixed, // El espacio entre los bloques. selector: cadena, // Obtener todos los bloques para el diseño hecho. 

Llamemos al complemento usando el siguiente código.

 $ (function () {$ (". free-wall"). each (function () {var wall = new freewall (this); wall.reset ({selector: '.size320', cellW: function (contenedor) { var cellWidth = 320; if (container.hasClass ('size320')) {cellWidth = container.width () / 2;} return cellWidth;}, cellH: function (contenedor) {var cellHeight = 320; if (container.hasClass) ('size320')) {cellHeight = container.height () / 2;} return cellHeight;}, fixSize: 0, gutterY: 20, gutterX: 20, onResize: function () {wall.fitWidth ();}}) wall.fitWidth ();}); $ (ventana) .trigger ("resize");}); 

Como puede ver en el código de función anterior, utilizamos algunas de las opciones, métodos y eventos de FreeWall. Como fixSize, gutterY, gutterX, onResize y fitWidth . Si desea utilizar otra opción, método o evento, puede encontrar la documentación en la página de inicio oficial de FreeWall.

Ahora puede ver el diseño de cuadrícula dinámica en acción en la página de demostración. Si cambia el tamaño de su navegador, los ladrillos se reorganizarán y redimensionarán automáticamente.

• Ver demostración
• Descargar Fuente

20 diseños de entradas creativas que hacen grandes recuerdos

Para muchos, un boleto es probablemente solo una hoja de papel que le permite a alguien participar en un evento, viajar en un modo de transporte designado o ver una película. Usualmente lo descartamos una vez que ha cumplido su propósito, por lo que rara vez pensamos en un diseño de boleto creativo. S

(Consejos de tecnología y diseño)

Agregue su propia barra de progreso de carga de página con Pace.js

Para algunos usuarios, una barra de progreso puede ser muy útil. Les informa cuánto más cerca están de completar tareas. Normalmente, esto se usa para brindar una experiencia más amigable para el usuario. Cuando abre una página web en su navegador favorito, ya hay una barra de progreso predeterminada en la pestaña del navegador para ver si la página está completamente cargada.Con Pace

(Consejos de tecnología y diseño)