es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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

Cómo crear un datalista que se pueda buscar al instante

Cómo crear un datalista que se pueda buscar al instante

Las listas desplegables son una manera ordenada de proporcionar opciones para un campo de entrada, particularmente cuando la lista de opciones disponibles es larga. Un usuario puede elegir la opción que desea escribiendo en el campo, o mirar a través de las opciones que pueden coincidir con lo que está buscando. S

(Consejos de tecnología y diseño)

Esta aplicación te permite digitalizar y ver películas analógicas en teléfonos inteligentes

Esta aplicación te permite digitalizar y ver películas analógicas en teléfonos inteligentes

A medida que la fotografía moderna se ve dominada por las cámaras digitales, se ha vuelto más difícil encontrar un lugar donde la gente sepa cómo desarrollar la película de la vieja escuela. Abe Fettig cree que la tecnología tiene la solución a este problema en particular, por lo que ha lanzado un proyecto de Kickstarter para una aplicación llamada FilmLab .Desarrol

(Consejos de tecnología y diseño)