css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流

这篇具有很好参考价值的文章主要介绍了css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流,css3,前端,javascript

前提是每张图片宽度要设置成一样,准备15张图测试文章来源地址https://www.toymoban.com/news/detail-721292.html

<div class="img-main">
                <div>
                    <img src="@/assets/images/sq/1.jpg" alt="" title="1">
                </div>
                <div>
                    <img src="@/assets/images/sq/2.jpg" alt="" title="2">
                </div>
                <div>
                    <img src="@/assets/images/sq/3.jpg" alt="" title="3">
                </div>
                <div>
                    <img src="@/assets/images/sq/4.jpg" alt="" title="4">
                </div>
                <div>
                    <img src="@/assets/images/sq/5.jpg" alt="" title="5">
                </div>
                <div>
                    <img src="@/assets/images/sq/6.jpg" alt="" title="6">
                </div>
                <div>
                    <img src="@/assets/images/sq/7.jpg" alt="" title="7">
                </div>
                <div>
                    <img src="@/assets/images/sq/8.jpg" alt="" title="8">
                </div>
                <div>
                    <img src="@/assets/images/sq/9.jpg" alt="" title="9">
                </div>
                <div>
                    <img src="@/assets/images/sq/00.jpg" alt="" title="00">
                </div>
                <div>
                    <img src="@/assets/images/sq/11.jpg" alt="" title="11">
                </div>
                <div>
                    <img src="@/assets/images/sq/12.jpg" alt="" title="12">
                </div>
                <div>
                    <img src="@/assets/images/sq/13.jpg" alt="" title="13">
                </div>
                <div>
                    <img src="@/assets/images/sq/14.jpg" alt="" title="14">
                </div>
                <div>
                    <img src="@/assets/images/sq/15.jpg" alt="" title="15">
                </div>
 </div>

1.屏幕大小列可变column实现,设置默认每列的图片宽度

 //瀑布流column实现
 .img-main {
    //宽度200px 
    column-width: 300px;
    //列之间间隔2px 
    column-gap: 2px;
}
.img-main>div>img {
    width: 100%;
} 

2.屏幕大小列可变2 @media来控制


/* //瀑布流column实现 */
.img-main {
    /* 设置列数 改变屏幕大小@media 来控制-实现 默认1列-可自动改变  */
    column-count: 1;
    /* 列之间间隔2px  */
    column-gap: 2px;
      /* 设置每个item的底部间距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不变形设置,默认宽大小 */
    width: 100%;
    /* 设置每个item的底部间距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止图片被拆分到两列 */
}

/* 使用媒体查询,根据屏幕大小来调整列数 */
@media (min-width: 768px) {
    .img-main {
        column-count: 3;
        /* 屏幕宽度大于等于768px时,设置为3列 */
    }
}

@media (min-width: 1024px) {
    .img-main {
        column-count: 6;
        /* 屏幕宽度大于等于1024px时,设置为4列 */
    }
}

3.不可变-屏幕大小列不可变

.img-main {  
  column-count: 4; /* 设置列数为4 */  
  column-gap: 10px; /* 设置列之间的间距 */  
}  
.img-main>div {  
  margin-bottom: 10px; /* 设置每个item的底部间距 */  
  break-inside: avoid; /* 防止图片被拆分到两列 */  
}  
.img-main>div>img {  
  width: 100%; /* 图片宽度自适应列宽 */  
  height: auto; /* 图片高度自适应以保持原始比例 */  
}

4.不可变-屏幕大小列不可变

/* //瀑布流column实现 */
.img-main {
    /* 默认5列  */
    column-count: 5;
    /* 列之间间隔2px  */
    column-gap: 2px;
      /* 设置每个item的底部间距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不变形设置,默认宽大小 */
    width: 100%;
    /* 设置每个item的底部间距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止图片被拆分到两列 */
}

5.可变-可变js来实现-屏幕大小列可变

  .img-main {
            position: relative;
        }
        .img-main>div>img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }

<script>
    $(function () {
        // 获取图片的宽度(200px)
        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流处理
        function waterfallHandler() {
            // 获取图片的列数
            let column = parseInt($(window).width() / imgWidth);

            // 高度数组
            let heightArr = [];
            for(let i=0; i<column; i++) {
                heightArr[i] = 0;
            }

            // 遍历所有图片进行定位处理
            $.each($('img'), function (index, item) {
                // 当前元素的高度
                let itemHeight = $(item).outerHeight();
                // 高度数组最小的高度
                let minHeight = Math.min(...heightArr);
                // 高度数组最小的高度的索引
                let minIndex = heightArr.indexOf(minHeight);

                $(item).css({
                    position: 'absolute',
                    top: minHeight + 'px',
                    left: minIndex * imgWidth + 'px'
                });

                heightArr[minIndex] += itemHeight;
            });
        }

        // 窗口大小改变
        $(window).resize(function () {
            waterfallHandler();
        });
    });
</script>

到了这里,关于css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3实现图片的3D旋转效果

    准备两张图片,尺寸一样大,本代码中是绕 Y 轴进行旋转(也可以改为 X 轴)。 先看看效果:   代码如下:

    2024年02月12日
    浏览(51)
  • PyQt5:窗口大小根据屏幕大小自适应调整

     

    2024年02月12日
    浏览(51)
  • CSS 实现鼠标移动到图片上图片变大,不改变盒子大小

    实现鼠标经过图片时,图片等比放大,但是图片的父盒子不会改变;主要使用了 css 的动画来实现。

    2024年02月05日
    浏览(57)
  • 前端css + js +vue +element-ui 实现响应式布局,根据浏览器窗体大小自动响应

    我的环境是element-ui vue版的,其他的也可以,主要是css和js的内容 首先在data中定义一个对象 其实就是css的样式,不过放在了js 里面而已 这里css设置了两个属性 一个是transform 这个属性对div标签的缩放作用,当浏览器窗口或者屏幕大小改变时,就调整这个属性的值,来等比缩放

    2024年02月13日
    浏览(58)
  • CSS3背景样式详解(图像大小,图像位置等)

    在CSS3中,新增了3个背景属性 属性 说明 background-size 背景大小 background-origin 背景位置 background-clip 背景剪切 概念:在CSS3之前,我们是不能用CSS来控制背景图片大小的,背景图片的大小都是由图片实际大小确定的。 但在CSS3中,可以用background-size属性来定义背景图片的大小。

    2024年01月24日
    浏览(36)
  • CSS根据屏幕分辨率自动调整样式

    CSS 根据屏幕分辨率自适应样式的核心技术就是响应式设计(Responsive Design),主要依赖于CSS3的媒体查询(Media Queries)。媒体查询允许开发者根据设备的视窗宽度、高度、方向等特性来应用不同的CSS样式规则。以下是几个基本的媒体查询示例: css 在上面的例子中: screen 指定

    2024年04月15日
    浏览(41)
  • CSS3:图片边框

    图片也可以作为边框,以下是实例演示 实现该效果必须添加border样式,且必须位于border-image-socure之前 否则不会生效

    2024年02月12日
    浏览(32)
  • pygame中将图片填充到适合显示屏幕大小

            在pygame中显示背景图片时有时候会出现背景图片与显示屏幕大小不一的情况,这个程序应该能帮到你。 

    2024年02月06日
    浏览(47)
  • CSS3 用户界面、图片、按钮

    一、CSS3用户界面: 在CSS3中,增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性:resize、box-sizing、outline-offset。 1、resize: resize属性指定一个元素是否应该由用户去调整大小。 style div { border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:a

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包