Estou tentando implementar o @ de Chris Coyiexempl do uso de colunas CSS para criar uma grade de imagens responsiva contínu

Coloquei os arquivos de Chris no meu servidor e tudo parecia bem. A única coisa que mudei foram as imagens reai

Agora, como você vê no meutest page, existem apenas 4 colunas de imagens em vez dos 5 especificados, usandocolumn-count:5;. A quinta coluna é apenas um espaço em branco sem conteúdo.

Isso acontece apenas quando a janela do navegador é maior que 1200 px. Quando a janela do navegador é inferior a 1200 px, as consultas de mídia aumentam e diminuem a contagem de colunas 4, 3, 2 e finalmente 1. Em outras palavras, esse bug ocorre apenas quando ocolumn-count: é 5 e acima

Isso acontece no FF 10, Chrome 17+ e Safari 5 +.

Qualquer ajuda seria apreciada

Aqui está o HTML aparado:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

Aqui está o CSS intocado:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}