나는 다음과 같은 emmulate하기 위해 노력하고있어 이미지 갤러리

Question

Google+의 스타일 :

모든 아이디어를 어떻게? 기본적으로 모든 사진의 높이가 같고 사진이 정렬되어/자르기/크기가 동적으로 조정되어 행에 완벽하게 맞춰 지므로 왼쪽이나 오른쪽의 들쭉날쭉 한 변이 없습니다. 브라우저 창 크기를 조정하면 사진의 크기가 맞게 조정됩니다. 나는 동위 원소와 jquery 벽돌을 시험해 보았고 나에게이 효과를주지 않았다.

Answer 1

난 그냥이 매우 일을 구현했습니다.

1. 페이지가로드, 나는이의 maxWidth
2. 를 대상 컨테이너 (내 이미지가 살 것이다 컨테이너)의 가용 폭을 측정하고, 전화
   내가, Ajax 호출을 통과 : 여기 어떻게 내가 해냈어 서버까지의 최대 너비는
3. 서버에 표시 할 내 갤러리 이미지 목록을 결정하고 각 이미지를 하나씩 처리합니다.
4. 내 목록을 반복하는 동안 이미지를 행에 계속 추가합니다. 행의 길이는 maxWidth를 사용할 수 있습니다 (어느 쪽이 합격했는지). 이미지가 maxWidth를 오버플로하면 오버플로 양을 계산합니다.
5. 오버플로 양을 내 행의 이미지 수로 나누고 행의 각 이미지에서 해당 값을 뺍니다 (한 이미지가 ' t 그 폭은
6. 내가 각 행에 대해이 작업을 반복) 너무 많이 감소 얻을, 각각의 행은 내가 가진 몇 가지 고려해야 할 정확하게의 maxWidth

까지 추가 :

1. 나는 고려했다 account 각 이미지 사이에 원하는 여백의 너비와 factor를 maxWidth 각 행을 처리 할 때 누적 된 값.
2. 우리는 코너 스탬프 이미지 (왼쪽 상단 모서리에서 더 크고 고정 된 이미지입니다.이 이미지는 두 행을 포함하고 다른 다른 축소판보다 넓었습니다.) 처음 두 행에 대해 다른 maxWidth를 계산해야했습니다.
3. 브라우저의 크기를 조정할 때 크기를 다시 계산해야했습니다. 창의 크기 조정 이벤트에 바인딩하면 끌기 중에 여러 AJAX 호출이 발생했습니다. 완료되면 크기 조정 이벤트를 수정해야했습니다.

전반적으로, 이미지 갤러리 아주 잘 밝혀졌다. 그는 스크린 샷입니다.

Answer 2

유체 그리드 시스템은 이러한 경우에 도움이 될 것입니다 : http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem