CSS3 column-width实现响应式樱花色的图片墙 - 踏得网

简单的代码让你拥有漂亮的响应式图片墙

css, photo, wall

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2844
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="container">
    <img src="/uploads/user_upload/34115/P_00.jpg" alt="" class="a1" />
    <img src="/uploads/user_upload/34115/P_01.jpg" alt="" class="a2" />
    <img src="/uploads/user_upload/34115/P_02.jpg" alt="" class="a3" />
    <img src="/uploads/user_upload/34115/P_03.jpg" alt="" class="a4" />
    <img src="/uploads/user_upload/34115/P_04.jpg" alt="" class="a5" />
    <img src="/uploads/user_upload/34115/P_05.jpg" alt="" class="a6" />
    <img src="/uploads/user_upload/34115/P_06.jpg" alt="" class="a7" />
    <img src="/uploads/user_upload/34115/P_07.jpg" alt="" class="a8" />
    <img src="/uploads/user_upload/34115/P_08.jpg" alt="" class="a9" />
    <img src="/uploads/user_upload/34115/P_09.jpg" alt="" class="a10" />
    <img src="/uploads/user_upload/34115/P_010.jpg" alt="" class="a11" />
    <img src="/uploads/user_upload/34115/P_011.jpg" alt="" class="a12" />
    <img src="/uploads/user_upload/34115/P_012.jpg" alt="" class="a13" />
    <img src="/uploads/user_upload/34115/P_013.jpg" alt="" class="a14" />
    <img src="/uploads/user_upload/34115/P_014.jpg" alt="" class="a15" />
    <img src="/uploads/user_upload/34115/P_015.jpg" alt="" class="a16" />
    <img src="/uploads/user_upload/34115/P_016.jpg" alt="" class="a17" />
    <img src="/uploads/user_upload/34115/P_017.jpg" alt="" class="a18" />
    <img src="/uploads/user_upload/34115/P_018.jpg" alt="" class="a19" />
    <img src="/uploads/user_upload/34115/P_019.jpg" alt="" class="a20" />
</div>