2010-08-06 3 views
5

새로운 Google 이미지 검색을 본 사람이 있습니까? 이미지를 한 영역에서 떠 다니게 만듭니다. 이미지는 크기로 그룹화하여 올바르게 맞 춥니 다. 이미지를 만들기위한 이러한 이미지 새로운 Google 이미지는 어떻게 정확하게 떠 다니는가

  • CSS 규칙의 폭과 높이를 포함하는 규칙의 일종으로

    • 스크립팅 :

      Frog images

      나는이 일을 두 가지 방법이 있습니다 같아요.

    스크립트 시나리오에서 최대 너비 1000px를 사용하여 4 줄의 이미지에 대해 4 번 채우기 위해 이미지를 그룹화 할 수 있습니다.

    CSS 규칙은 이미지를 플로트 시키지만 순서를 다시 지정해야합니다.

    누구나 어떻게 작동하는지 다른 아이디어가 있습니까?

  • +0

    가능한 단서 - 모두로드 된 후 브라우저에서 더 잘 맞도록 정리되었습니다. – Justin

    +1

    Firefox에서는 ''을 사용합니다. JavaScript가 없으면 간단한 이미지로 저하됩니다. – MvanGeest

    +0

    와우 나는 그들이 항상 완벽하게 일렬로 있음을 실제로 알아 채지 못했습니다. 꽤 멋진 구글. 실제 작업이 서버 측에서 수행되고있는 것처럼 보입니다. 또한 이미지를 자르면 두 눈을 맞추기가 두렵지 않습니다. – Triptych

    답변

    1

    캔버스 js로 이미지의 크기를 조정합니다. 그런 다음 li width, height를 설정 한 다음 숨겨진 오버플로를 추가합니다. css img.myimg {width : 70px}에서 모든 이미지의 너비를 설정하면 동일한 결과를 얻을 수 있습니다. js 코드를 사용하여 페이지를 렌더링하는 데 시간이 오래 걸리지 않는다고 생각합니다.

    1

    나는이 모든 staf를 서버에서 수행하고 있다고 생각한다. 창 크기를 조정하려고 시도한다. 크기가 조정 된 이미지가있는 sercond에서 다시로드 될 것이다. 반면에 js로로드 된 이미지의 크기를 조정하는 데 사용할 수있는 캔버스 요소를 찾았습니다

    +0

    그들은 또한 주문을 유지합니다. 이는 이미지가 잘 맞도록 조정된다는 것을 나타냅니다. 에 걸쳐 그리드 (10, 8, 6, 4, 3) 복잡한! – Paul

    관련 문제