Bootstrap4의 Cards와 Masonry.js의 궁합이 가장 강했습니다.

의 개별 기사입니다. 은 이미지 등의 직사각형 객체를 깔끔하게 정렬시켜주는 jQuery 플러그인입니다. 은 Bootstrap4에서 도입된 새로운 구성 요소입니다. 구형의 범위에 캐릭터 라인이나 화상등을 삽입해 늘어놓을 수가 있습니다. 이전 버전에서는 panel이라는 이름이었지만 그리드 레이아웃에서의 사용성이 좋아지고 Cards라는 이름으로 재등장했습니다. 이 두 가지를 조합하면, 전하고 싶은...

masonrygridlayoutBootstrapjQuerybootstrap4

React로 Masonry (타일을 깔아 놓은 디자인) 구현

을 사용하여 이러한 디자인을 구현합니다. (이 디자인은 CSS뿐이라고 상당히 어렵습니다.) JSX CSS 이 예에서는 한 행에 4개의 열을 기본 열 수로 설정합니다. 576px 이하일 때는 1열 밖에 표시하지 않도록 설정하고 있습니다만, 페이지 표시 후의 순간만 4열 표시되어 버립니다. 이것을 막기 위해서, 절대로 제대로 표시하고 싶은 스마트폰 전용의 DOM을 새롭게 작성해, PC로 표시할 ...

npmmasonry자바스크립트React