css3属性多列column瀑布流效果

最近看了一个视频,看到了css3 中colum属性

现在就来讲讲column属性,

  • column-count
  • column-gap
  • column-rule

Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本不支持多列属性。

column-count 属性规定元素应该被分隔的列数:

把 div 元素中的文本分隔为6列:
div
{
-moz-column-count:6; 	/* Firefox */
-webkit-column-count:6; /* Safari 和 Chrome */
column-count:6;
}

column-gap 属性规定列之间的间隔:

规定列之间 5 像素的间隔:
div
{
-moz-column-gap:5px;		/* Firefox */
-webkit-column-gap:5px;	/* Safari 和 Chrome */
column-gap:5px;
}

column-rule 属性设置列之间的宽度、样式和颜色规则。

规定列之间的宽度、样式和颜色规则:
div
{
-moz-column-rule:3px outset #ff0000;	/* Firefox */
-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
column-rule:3px outset #ff0000;
}

华丽的分割线



下面就奔入主题,用column多列来写个瀑布流效果的

下面代码中,就放了一些好看的图片 😀 😀


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>css属性column瀑布流效果</title>
    <script type="text/javascript" src="//cdn.blyoo.com/js/jquery-2.1.4.min.js"></script>
    <style type="text/css">
   
      

        .img {
            column-gap: 5px;
            -webkit-column-gap: 5px;
            -webkit-column-count: 6;
            column-count: 6;

        }

        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>

    <div class="img">
        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388222_OWKHEBXUROLIFCYVSOLBZPFVLBRHXND.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388250_CCIJCJBRHXOEUKAQGWMCSIYOMCSIYOEUKAQGWMC.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388266_PUXFVLBRHXNDTJZPFVLJZPFVLBRIYOFCYV.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388282_OAYOJGDAWTQNKOLIFCYVSPMJGDAWT.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388297_UQYVAWTQNKHFVLBRHXNDTJHXNDTJZPFVLBRHXOEU.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388313_GYOWMCSIYOEUKAQGWUKAQG.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388327_FZLMDXFVLBRHXNDTJZPFVLBRHXNDTJIYOM.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388343_YLUROLIFCYDAWTQNKHEBX.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388358_FCBCHLIFCYDAWTQNKHEBXUROFVLBRHXNDTJZPFV.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388375_MWFVLBRHXOEUKAQGWMCSIYOEUKAQGWM.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388390_ZLROEDTJZPFVLBRHXNDTJZPF.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388405_AYHXVDTJAQIFCGDAWTQN.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388421_TXGSPMJGDAWTQNROLIFCY.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388468_LYKKUMJGDAWTQNRNVLBRHXNDTJZPFVLBRHXNDTJZ.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388483_WAMNHWGWMCSIYOEUKAQGWMCSIY.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388501_LXSBRHXNLBRHXNDTJZPFVLBRHX.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388514_FUVCWTQNKHEBXUROLIFJGDAWTQ.jpg" />

       <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388530_RBVSPMJGDAWTQUROLIFCYPFVLBRHX.jpg" />

        <img src="//img.blyoo.com/img/2017/201701/BL_IMG_20170131_14388546_NXZPFVLBRHXNDTJZQGWMCSIYWMCSIYOE.jpg" />




    </div>
    <!--下面就用jquery写个无限加载的-->
    <script>
        $(function () {
            $(window).scroll(function () {

                if (($(this).scrollTop() + $(this).outerHeight()) > ($(document).outerHeight()-10)) {
                   
                    $('.img').append($('.img').html())

                };

            });
        })
    </script>
</body>
</html>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注