文章目录

使用column-count和break-inside实现瀑布流布局

前段时间帮朋友做了一个名为笑点研究所的图片站,刚开始她说做成博客类型的,于是大概给她画了一下样式,她觉得不是很适合。

她问我怎么做好看些,我说我做的不一定好看,但是可以提供一下思路,用“瀑布流”布局。

朋友也看了一些其他瀑布流的网站,觉得还可以,于是就让我帮做成瀑布流的了。

做出来的详细样式这里就不多讲了,就说一下遇到的问题吧。

用的column-count和break-inside,代码如下:

html代码.list{width:97.79%; padding:1% 1%;border:1px #ddd solid;border-top:none; display:inline-block;
-moz-column-count: 2; /* Firefox */
        -webkit-column-count: 2; /* Safari Chrome */
        column-count: 2;      /* 将 div 元素中的文本分为2列,并规定列间1rem像素的间隔。 */
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
}
.list article{width:100%;display:inline-block; padding:0; background:#ffffff; margin:4px 0 10px 0;border:1px #ccc solid; border-radius:3px; float:left;-moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;   /*break-inside: avoid; 避免元素内部断行并产生新列*/
		}

<div class="article_list">
<article>
<a target="_blank" href="http://www.gifsuo.com/gaoxiaopic/587.html">
<img src="http://tva1.sinaimg.cn/large/4b2958c9gy1gokv48zapnj20j60oadmw.jpg" alt="搞笑图片gifsuo.com" title="搞笑图片gifsuo.com">
</a>
</article>
</div>

这样的确是达到了瀑布流布局效果,但是发现一个问题,就是有时当页面第一次加载的时候,左边的会很长一串排下去。

第一次加载

刷新过后

再次刷新就是正常的了,关于这个问题一直没有解决好,不知道同学们有没有遇到过,亦或是有什么解决方案呢?

本文网址:http://www.santii.com/article/248.html

数据更新时间:2021-04-17