Pure js는 폭포 흐름을 구현하여 사진을 표시합니다(창 크기에 자동으로 적응)_javascript 기술

폭포 흐름을 사용하여 사진을 표시하는 것보다 더 좋은 것은 없습니다. 다음은 폭포 흐름의 구현 방법입니다(각 행의 길이는 브라우저 창의 길이와 같습니다). CSS3를 사용하여 구현할 수도 있습니다. . 구글에서 검색해보시면 아실 겁니다.

내 생각은 이 행에 있는 사진의 가로세로 비율이 변경되지 않고 높이가 250보다 낮을 때 그림을 하나씩 삽입하는 것입니다. 즉, 이 행이 삽입됩니다.

그런 다음 다음 루프를 입력하여 다음 줄을 삽입합니다. 공식은 매우 간단합니다. 이 행의 현재 높이가 h라고 가정하면 높이와 너비가 (x, y)인 그림을 삽입하면 다음 관계가 충족됩니다.
h' * (w / h y / x) = w
w는 브라우저 창의 너비,
이면 h' = w / (w / h y / x)

복사 code 코드는 다음과 같습니다.

>