javascript - start - ¿Cómo utilizar jQuery Masonry con elementos de diferente ancho?
masonry hybrid (5)
Estoy implementando el complemento jQuery Masonry, pero tengo problemas con elementos más anchos que una columna, lo que significa que el ancho div de todos los elementos de Masonería no es idéntico. ¿Alguien podría ayudarme con esto?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/masonry.min.js" type="text/javascript"></script>
</head>
<style>
.item0,.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8{float:left; margin: 10px;
background:#999;}
.item1,.item0 {
width:300px;
}
.item2 {
width:200px;
}
.item3,.item8 {
width:100px;
}
.item4,.item5,.item6,.item7{
width:100px;
}
#container{
float:left; width:1000px;
}
</style>
<script type="text/javascript">
$(function(){
$(''#container'').masonry(
{});
});
</script>
<body>
<div id="container">
<div class="item0">1 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item0">2 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
<div class="item1">3 sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item2">4 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item3">5 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
<div class="item4">6 sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item5">7 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item6">sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div>
<div class="item7">sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item8">tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
<div class="item7">sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div>
<div class="item8">tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div>
</div>
</body>
</html>
Después de medio día de probar diferentes configuraciones, tratando de averiguar por qué mi complemento de mampostería no funciona, leí estas publicaciones, tuve la idea ... tuve que usar el mínimo común denominador de todos mis anchos. Pero tenía anchos como 346, 278, 199 ... así que me pregunté, sin ningún dolor de cabeza, cualquiera de esos anchos es divisible por 1, así que lo intenté ... y la magia sucedió, todo encajó perfectamente en su lugar.
Entonces, la forma más sencilla de hacerlo funcionar, usa 1 como columnWidth
Si conoce un ancho de columna mínimo, simplemente establezca eso en su ancho de columna y funcionará. En mi caso fue de 396. También tenía una columna con el doble de ancho.
$(''.container'').masonry({
columnWidth: 396,
itemSelector: ''.item''
});
Si no configura un parámetro de ancho de columna cuando configura la mampostería (es decir, $(''#container'').masonry({columnWidth:100}) ), entonces la mampostería se establece por defecto en el ancho del primer bloque. En su ejemplo, el primer bloque tiene 300 píxeles de ancho, por lo que el ancho mínimo que cubrirá un bloque es de 300 píxeles, incluso aunque su ancho esté configurado en 100 píxeles.
Un buen número de ancho de columna sería el mínimo de los anchos posibles (como en su ejemplo, donde todos son múltiplos de 100px), o el mayor divisor común (por ejemplo, si los ladrillos tienen un ancho de 100, 150 y 200 píxeles) , 50 sería un buen número para usar para columnWidth).
debido a un margin: 10px; en todos sus artículos div. por lo que debe establecer un columnWidth: 120
$(function(){
$(''#container'').masonry({
columnWidth : 120
});
});
columnWidth especificar un columnWidth para que la albañilería sepa cuántas columnas desea:
$(''#container'').masonry(
{
columnWidth : 100
});