2011-08-09 3 views
2

나는 웹 프로젝트를 진행하고, 나는 가장 다음과 같은 시나리오에 접근하는 방법을 생각하고있다 : 나는 데이터베이스에 이미지의 무리를 가지고 내가 원하는격자 생성 및 CSS/JS/PHP로 구분

을 이것을 그리드에로드합니다. 높은 순위의 이미지는 캔버스가 더 커야하며, 낮은 순위의 이미지는 그렇지 않습니다. 이미지의 크기는 표준이 아니므로 각기 다른 크기의 세로 또는 가로 사진이 될 수 있습니다. 종횡비는 그대로 유지해야하며 창은 완전히 가로로 채워야합니다 (너비는 100 %). 사용자는 세로로 스크롤 할 수 있습니다.

그리드의 필드 구분에 대한 아이디어를 얻기 위해 빠른 와이어 프레임을 첨부했습니다. grid division

여러분이 최선을 다하는 방법에 대한 아이디어가 있습니까? 아마 내가 몇 줄을 "표준화"해야한다고 생각했습니다. 그리고 행이 무작위로 배치되어 미리 보이지 않도록하십시오. 그러나 이것은 분명히 실제로 계산되지 않습니다. 어떤 생각이라도 감사드립니다!

+1

(5)에 의해 window.width을 나누어이 같은 뭔가를 찾고 계십니까 // CSS 트릭 .com/13372-seamless-responsive-photo-grid/ – Alex

+0

굉장! 공유해 주셔서 감사합니다. 바로 보겠습니다. 더 높은 순위의 이미지가 상대적으로 커 보이도록 이미지를 사용자 정의해야 할 수도 있습니다. 그러나 이것은 확실히 올바른 방향으로 나아가는 것입니다! – dandoen

답변

0

이 격자가 http://css-tricks.com/13372-seamless-responsive-photo-grid/에 적합하면 1d 빈 포장 알고리즘을 찾을 수 있습니다. 이 알고리즘은 화면을 동일한 너비의 수직 저장소로 바꿉니다. 그런 다음 첫 번째 적합, 가장 적합, 다음 적합 또는 최악 적합에 대해 수집 물을 조사합니다. 각 메소드를 무작위 순서, 감소하는 순서 또는 증가하는 순서와 결합 할 수 있습니다. 이것은 해결하기가 매우 힘든 문제입니다. 아마도 무차별 대입 솔루션을 시도하고 싶습니까? HTTP :