瀑布流布局_技术笔记

Dream魏婚夫 2018-06-12

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片瀑布流特效</title>
    <style type="text/css" media="screen">
        *{margin: 0;padding: 0;}
        .container{
        width: 1150px;
        margin: 0 auto;
        height: auto;
        padding: 50px 0 50px 0;
        -webkit-column-count: 5;
        -moz-column-count: 5;
        -o-column-count: 5;
        -ms-column-count: 5;
        }
        .container img{
        width: 165px;
        height: auto;
        padding: 10px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 6px;
        }
</style>
</head>
<boy>
    <div class="container">
        <img src="img/0.jpg" alt="">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
        <img src="img/7.jpg" alt="">
        <img src="img/8.jpg" alt="">
        <img src="img/9.jpg" alt="">
        <img src="img/10.jpg" alt="">
        <img src="img/11.jpg" alt="">
        <img src="img/12.jpg" alt="">
    </div>
</body>
</html>

图片来自于慕课网本堂课程跟学图片

截图

0赞 · 1采集

慕仙5237505 2017-11-20

202列宽算了padding ： http://pan.baidu.com/s/1jGE77O6

截图
0赞 · 1采集
慕仙5237505 2017-11-20

columns:综合属性

截图
0赞 · 0采集
慕仙5237505 2017-11-20

多栏布局

截图
0赞 · 0采集
慕瓜5189485 2017-11-10

css3多栏布局column 1、column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o opera -moz 火狐FireFox 2、column-width 和column-count没有必要同时出现 3、column-rule设置列与列之间的边框 4、column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

0赞 · 1采集
乒小妮3476199 2017-08-21

采用CSS3进行瀑布流布局

截图
0赞 · 0采集
白小九 2017-07-30

CSS3多栏布局实现图片布局

截图
0赞 · 0采集
yaya_ling 2017-07-11

css3多栏布局实现瀑布流

截图
0赞 · 0采集
wshyzx 2017-03-14

现在chrome和opera都是blink内核

0赞 · 0采集
qq_微不足道_0 2017-03-09

【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o 欧朋opera -moz 火狐FireFox ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

0赞 · 2采集
redli_0 2017-02-14

多栏布局column-width可以设置每一列的宽度，并根据窗口宽度除以每一列宽度得到的列数进行纵向排列div模块，实现瀑布流布局

0赞 · 0采集
内心必须强大起来的2B狒狒 2016-12-10

css3 columns属性

0赞 · 0采集
慕粉4206829 2016-12-03

webkit moz 0 ms

0赞 · 0采集
krystalcl001 2016-11-09

-webkit-column-width 定义一列的宽度，浏览器根据屏幕可视宽度来计算列数 1,2,3竖着排

0赞 · 0采集
慕工程2957023 2016-10-19

【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o 欧朋opera -moz 火狐FireFox ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

0赞 · 0采集
BeingTowards 2016-10-12

【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o 欧朋opera -moz 火狐FireFox ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

0赞 · 0采集
UFO2015 2016-10-09

15 ????

截图
0赞 · 0采集
慕尼黑4302789 2016-09-02

浏览器的宽度除以列宽column-width然后取整得出每列多少个图片，会根据浏览器大小进行改变

截图
0赞 · 1采集
爱吃竹的熊猫 2016-07-24

多栏布局

截图
0赞 · 0采集
Fighting_nyc 2016-06-30

【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o 欧朋opera -moz 火狐FireFox ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

0赞 · 1采集
weibo_幸福长大了_0 2016-06-24

width

截图
0赞 · 0采集
羊壹羊 2016-06-23

各种浏览器的设置

截图
0赞 · 0采集
P妞酱酱 2016-06-07

333333333333333

截图
0赞 · 0采集
P妞酱酱 2016-06-07

333333333

截图
0赞 · 0采集
P妞酱酱 2016-06-07

eeeeeeeee

截图
0赞 · 0采集
刘健lj 2016-06-03

【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题，不同内核要写其前缀 -webkit Google浏览器内核 -ms IE -o 欧朋opera -moz 火狐FireFox ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距，不一定定义多少，实际就显示多少。其计算规则：用当前浏览器宽口宽除以定义的列宽，剩下的距离平均分配

0赞 · 0采集
青灯过往 2016-04-14

css3实线瀑布流,好牛逼

0赞 · 1采集
203 2016-04-10

用css3瀑布流布局

截图
0赞 · 0采集
Amy1234567 2016-03-28

CSS3的瀑布流利用columns 设置列的宽度即可

0赞 · 0采集
Amy1234567 2016-03-28

JS的瀑布流：先算窗口的宽度除以图片的宽度算出列，然后求出第一行最小高度的图片，用他的index让下一行的第一张图利用position：absolute 还要left定位在第一行最小高度的图片的下面left=Math.floor(img.width())*index

0赞 · 0采集

数据加载中...