css瀑布流三种写法的区别

来源：互联网发布：ubuntu 16.04 聊天工具编辑：程序博客网时间：2024/05/29 15:39

了解瀑布流的原理

瀑布流呢,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高.这样就很难看了
神奇的columns：
column-count：设置的列数
column-width：设置的列的宽度
用这两个属性我们很容易写出类似瀑布流的页面，但是如果你细心的话就会发现我们设置的列数不同，如果你用一段文字进行测试，(比如下面的代码)也许并不会出现问题，但是注意

<!DOCTYPE html><html><head><style> .newspaper{columns:100px 3;-webkit-columns:100px 3; /* Safari and Chrome */-moz-columns:100px 3; /* Firefox */}</style></head><body><p><b>注释：</b>Internet Explorer 不支持 columns 属性。</p><div class="newspaper">人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。</div></body>

如果你用的是图片，且图片宽度是定死的，那就完了，这个属性最方便的就是是浏览器自动计算宽度，如果列数过小，会造成多张图片排列在一排（这就违背我们原来的初衷了），还有如果你细心就会发现图片排列是没有顺序的，当然如果坚持使用，建议加上响应式布局（不同的宽度设置不同的列数）
float：
先上代码

    <div id="d1">        <img src="i/j1.jpg" alt="" />           <img src="i1/6.jpg" alt="" />        <img src="i/second1.png" alt="" />        </div>        <div>        <img src="i/second17.png" alt="" />        <img src="i/second2.png" alt="" />          <img src="i1/1.jpg" alt="" />        </div>        <div>        <img src="i/second3.png" alt="" />        <img src="i1/10.jpg" alt="" />        <img src="i/second11.png" alt="" />    </div>

div{
width: 200px;
float: left;
}
img{
width: 200px;
}
这个布局比较简单，先固定各列宽度，并且左浮动，如果想美观，可以在上面代码自己加需要的宽度高度，（细心的人发现上面给图片也设置了宽度，这是因为图片宽度过宽会被裁剪，看起来会很乱）这里说一下优点和缺点。
优点：布局简单，一列中的数据为一组，列中的每个数据块依次排列即可，更多数据加载时，只需要分别插入到不同的列上；
缺点：列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；滚动加载更多数据时，还要指定插入到第几列中，还是不方便。
最后一种方法是flex
在刚接触的时候，发现flex布局非常方便，就想着试着写一下瀑布流，但是在第一次写的时候发现无法列对齐
html同上

 div{    display: flex;    justify-content: space-between;    align-items:flex-start;    flex-wrap: wrap;    flex: 10px;}  img{    width: 200px;}

在贴一个html

    <div id="d1">        <img src="i/j1.jpg" alt="" />           <img src="i1/6.jpg" alt="" />        <img src="i/second1.png" alt="" />        <img src="i/second17.png" alt="" />        <img src="i/second2.png" alt="" />          <img src="i1/1.jpg" alt="" />        <img src="i/second3.png" alt="" />        <img src="i1/10.jpg" alt="" />        <img src="i/second11.png" alt="" />    </div>

如果你用了上面的html代码而且你的图片刚好每行个数都相同，那恭喜你不会发现有任何错误，而且看起来还比较满意，那不妨调一下宽度试试，会发现每行的图片实际是在调整图片间的距离，这就造成列对不齐，
而事先像float布局将各列宽度固定，则会发现这两个实际上还是有相同的一个错误，那就是没有办法跟在上一行图片的上面，每行的图片实际上是顶部对齐的，而flex布局并没有任何一个属性可以改变这个
再来看一下下面的代码

  div {    display: flex;    flex-direction: column;    flex-wrap: wrap;    height: 100vw;    font-size: 0;}  img{    width: 200px;}

这里面改了一个重要的东西就是将主轴换成上下方向，细心的人会发现这个代码特意加了高度的限定，因为在主轴换方向后楼楼发现换行失效了，这下完蛋了（在网上也没找到理由，哪位大佬找到了可以在下面留言，谢谢大佬），这就是为什么要限定高度，可以在高度装不下的时候转到下一列，因为主轴调换，其实和转到下一行是一个道理。
楼楼也是初学者，可能有的地方说错了，欢迎大佬指出错误

阅读全文

0 0