pinterest 레이아웃 /로드에서 가변 이미지 크기 처리

내 사이트에 대해 pinterest 스타일 레이아웃을 컴파일하려고합니다. 그리고 그것을 성취했습니다. 가능한 한 빨리 내 사이트의로드를 얻으려고했습니다.pinterest 레이아웃 /로드에서 가변 이미지 크기 처리

이렇게하려면 게으른로드 스크립트 (여기에서 찾을 수 있습니다 : http://www.appelsiini.net/projects/lazyload)를 본 적이 있습니다. 기본적으로 사이트를 먼저로드 한 다음 이미지를로드하므로로드시 사이트의 유용성이 향상됩니다 무슨 pinterest 않습니다 ...

우리가 가지고있는 문제는, 스크립트가 작동하는 동안, 우리는 각 이미지 주위에 상자가있어서 그것을 표현하고 이미지에 정의되지 않은 크기가 있기 때문에 레이아웃이 엉망이됩니다. 때마다. 본질적으로 이미지 크기는 일단로드되면 레이아웃에 항상 놀랍습니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? pinterest는 무엇을합니까? 그 (것)들과 유사 하, 우리는 각 모양 및 크기의 심상이 php와 javascript 둘 다를 통해 사용자에 의해 우리의 위치에 동적으로 추가 될 것이다, 그래서 각 이미지의 모든 크기를 우리가 할 수있는 무언가이라고 단순히 생각해.

도움 주셔서 감사합니다.

출처

2013-01-18 Brandon Willbanks

Pinterest가 이미지를 측정하고 거기에 이미지 크기를 저장했을 가능성이 큽니다. 이어서 img 태그 내에 단순히 출력 높이, 폭은 CSS에 의해 그 일련의 동적 아니다 우선 CSS에 설정된 규칙 화상의 폭 (이 늘 변화)를 제어

: 다음

.pin .ImgLink img 
{ 
    max-width: 192px; 
    opacity: 1; 
} 

.PinImageImg 
{ 
    min-height:75px; 
    background-color:#f2f0f0 
}

및 각각의 이미지가 자바 스크립트에 의해로드 될 때 레이아웃의 더 터지는이없는

<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />

이 방법 : 각 img 태그의 HTML 마크 업 높이를 (이것은 각 이미지에 대한 변경) 제어합니다.

출처

2013-01-18 21:46:47

pinterest 레이아웃 /로드에서 가변 이미지 크기 처리

답변

관련 문제