用 flex 和 瀑布流 解决高度不同的元素浮动导致页面混乱问题

news/2024/7/19 13:22:00 标签: javascript, js, css

当元素的高度各不相同并且设置了浮动，页面展示如下：
在这里插入图片描述

    • flex布局
    • 瀑布流布局
    • 瀑布流动态加载图片

flex布局

红框所画图片在第一行放不下，属于第二行的元素，但是由于浮动的特性，导致它出现在了这个位置，如果想让它另起一行顶头展示，可以使用flex布局，在父级元素上设置：

css">display: flex;
flex-wrap: wrap;

子元素的浮动删除不删除都行，因为父级设置flex，子元素浮动自动失效，效果展示如下：
在这里插入图片描述

瀑布流布局

瀑布流展示参考博客：
javascript实现瀑布流动态加载图片原理
通过js 用瀑布流的方式展示，此时元素须设置浮动，父元素不能用flex布局，效果如下：
在这里插入图片描述
当元素第一行摆不下时，会选择高度最低的一列，在它下边摆放，如果有大量元素的话，也不会产生空白。
js代码如下：

javascript">imgLocation("container", "box");

//parent 是父元素id, content是子元素class
function imgLocation(parent, content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content);//父元素中所有子元素的个数
    var imgWidth = ccontent[0].offsetWidth;//子元素的宽度
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);//一行放子元素个数
    cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto";//设置父元素的宽度
    var boxHeightArr = [];//每一列子元素的高度
    for (var i = 0; i < ccontent.length; i++) {
        if (i < num) {
            boxHeightArr[i] = ccontent[i].offsetHeight;
        } else {
            var minHeight = Math.min.apply(null, boxHeightArr);//获取所有列中的最小高度
            var minIndex = getMinheightLocation(boxHeightArr, minHeight);//得到最小高度下标
            //   console.log(minHeight+","+minIndex);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight + "px";//距离顶部高度
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";//距离左边长度
            boxHeightArr[minIndex] += ccontent[i].offsetHeight;
            //   console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined
        }
    }
}
//获取parent下边类名是content的元素
function getChildElement(parent, content) {
    //将parent下有content的全部取出
    var contentArr = [];
    var allContent = parent.getElementsByTagName("*");
    for (i = 0; i < allContent.length; i++) {
        if (allContent[i].className == content) {
            contentArr.push(allContent[i]);
        }
    }
    return contentArr;
}
//获取boxHeightArr数组中高度为minHeight的索引
function getMinheightLocation(boxHeightArr, minHeight) {
    for (var i in boxHeightArr) {
        if (boxHeightArr[i] == minHeight) {
            return i
        }
    }
}

瀑布流动态加载图片

瀑布流展示参考博客：
javascript实现瀑布流动态加载图片原理
完整瀑布流动态加载图片，当滚动滚动条时，不断添加元素，效果展示如下：
在这里插入图片描述
完整代码（图片自己设置）：

javascript"><!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>js实现瀑布流效果-动态加载图片</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #container {
            position: relative;
        }

        .box {
            padding: 5px;
            float: left;
            margin: 0px auto;
        }

        .box_img {
            padding: 5px;
            border: 1px solid #DCDCDC;
            box-shadow: 0 0 5px #ccc;
            border-radius: 5px;
        }

        .box_img img {
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="../img/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/6.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/7.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/8.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/9.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/10.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../img/6.jpg" />
            </div>
        </div>
    </div>


    <script>
        window.onload = function () {
            imgLocation("container", "box");
            var imgData = { "data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "8.jpg" }, { "src": "4.jpg" }, { "src": "6.jpg" }, { "src": "3.jpg" }, { "src": "7.jpg" }, { "src": "5.jpg" }, { "src": "9.jpg" }, { "src": "1.jpg" }, { "src": "3.jpg" }] }
            window.onscroll = function () {
                if (checkFlag()) {
                    var cparent = document.getElementById("container");
                    for (var i = 0; i < imgData.data.length; i++) {
                        var ccontent = document.createElement("div");
                        ccontent.className = "box";
                        cparent.appendChild(ccontent);
                        var boximg = document.createElement("div");
                        boximg.className = "box_img";
                        ccontent.appendChild(boximg);
                        var img = document.createElement("img");
                        img.src = "../img/" + imgData.data[i].src;
                        boximg.appendChild(img);

                        //另外一种方法在div后边追加内容，不覆盖原有内容
                        //    var content="<div class='box'><div class='box_img'><img src='../img/"+imgData.data[i].src+"'/></div></div>";
                        //    cparent.innerHTML+=content;
                    }
                    imgLocation("container", "box");
                }
            }
        }

        function checkFlag() {
            var cparent = document.getElementById("container");
            var ccontent = getChildElement(cparent, "box");//父元素中所有class是box的子元素个数
            var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;//最后一张图片距离顶部高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条距离顶部高度
            var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;//屏幕高度
            // console.log(lastContentHeight+","+scrollTop+","+pageHeight);
            if (lastContentHeight < scrollTop + pageHeight) {
                return true;
            }
        }

        //把图片以瀑布流的方式展示
        function imgLocation(parent, content) {
            var cparent = document.getElementById(parent);
		    var ccontent = getChildElement(cparent, content);//父元素中所有子元素的个数
		    var imgWidth = ccontent[0].offsetWidth;//子元素的宽度
		    var num = Math.floor(document.documentElement.clientWidth / imgWidth);//一行放子元素个数
		    cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto";//设置父元素的宽度
		    var boxHeightArr = [];//每一列子元素的高度
		    for (var i = 0; i < ccontent.length; i++) {
		        if (i < num) {
		            boxHeightArr[i] = ccontent[i].offsetHeight;
		        } else {
		            var minHeight = Math.min.apply(null, boxHeightArr);//获取所有列中的最小高度
		            var minIndex = getMinheightLocation(boxHeightArr, minHeight);//得到最小高度下标
		            //   console.log(minHeight+","+minIndex);
		            ccontent[i].style.position = "absolute";
		            ccontent[i].style.top = minHeight + "px";//距离顶部高度
		            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";//距离左边长度
		            boxHeightArr[minIndex] += ccontent[i].offsetHeight;
		            //   console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined
		        }
		    }
        }

        //获取boxHeightArr数组中高度为minHeight的索引
        function getMinheightLocation(boxHeightArr, minHeight) {
            for (var i in boxHeightArr) {
                if (boxHeightArr[i] == minHeight) {
                    return i
                }
            }
        }

        //获取parent下边类名是content的元素
        function getChildElement(parent, content) {
            //将parent下有content的全部取出
            var contentArr = [];
            var allContent = parent.getElementsByTagName("*");
            for (i = 0; i < allContent.length; i++) {
                if (allContent[i].className == content) {
                    contentArr.push(allContent[i]);
                }
            }
            return contentArr;
        }
    </script>
</body>
</html>

http://www.niftyadmin.cn/n/1584374.html

相关文章

git操作中出现Unlink of file ‘......‘ failed. Should I try again

git操作中出现Unlink of file ‘......‘ failed. Should I try again

出现这种情况&#xff0c;大多数原因是某个程序占用&#xff0c;这时先关闭程序&#xff0c;然后输入y即可。 如果关闭相关程序还是不能解决问题&#xff0c;可输入以下git 命令解决&#xff1a; git gc --auto git repack -d -l
阅读更多...
MPAndroidChart---CombinedChart(K线图+均线)

MPAndroidChart---CombinedChart(K线图+均线)

2019独角兽企业重金招聘Python工程师标准>>> CombinedChart是柱状图和折线图的组合图形,当然也可以作为CandleStickChart和折线图的组合图形, 也就是K线图和均线 /*** 蜡烛图和折线图的组合图形*/ public class CombinedChartUtils {private CombinedChart combined…
阅读更多...
JQ + Node 实现本地图片上传

JQ + Node 实现本地图片上传

参考博客&#xff1a;Node Js 实现图片上传 学习笔记 前台页面 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>上传图片</title><style>img {width: 200px;height: 200px;}&…
阅读更多...
IDEA同时启动两个Web项目

IDEA同时启动两个Web项目

2019独角兽企业重金招聘Python工程师标准>>> 两个Web项目要修改端口号&#xff0c;让两个项目端口号不同。 值得注意的是有两个端口需要修改&#xff0c; HTTP port、 JMX port 两个项目要不同才能都启动。 转载于:https://my.oschina.net/zjllovecode/blog/1814353…
阅读更多...
js 通过 fetch 请求数据

js 通过 fetch 请求数据

fetch是一种原生 js 对 HTTP 数据请求的方式&#xff0c;是 XMLHttpRequest 的一种更理想的替代方案 Fetch API 提供了一个 JavaScript 接口&#xff0c;用于访问和操纵 HTTP 管道的一些具体部分&#xff0c;例如请求和响应&#xff0c;它还提供了一个全局 fetch() 方法&#x…
阅读更多...
计算题：挣值、预测、沟通、盈亏平衡点、

计算题：挣值、预测、沟通、盈亏平衡点、

20000 4*5000*Y - 6*250*Y&#xff0c; 相当于是&#xff1a;净收入 总收入 - 投入成本。 转载于:https://www.cnblogs.com/JAVA-STUDYER/p/9055542.html
阅读更多...
4、Zookeeper分布式安装部署

4、Zookeeper分布式安装部署

1、分布式安装部署 1&#xff09;集群规划 在hadoop102、hadoop103和hadoop104三个节点上部署Zookeeper。 服务器hadoop102 服务器hadoop103 服务器hadoop104 Zookeeper Zookeeper Zookeeper Zookeeper 2&#xff09;解压安装 &#xff08;1&#xff09;解压Zookeep…
阅读更多...
js 同源页面间通信 storage 和跨域页面间通信 postMessage

js 同源页面间通信 storage 和跨域页面间通信 postMessage

同源页面间通信&#xff0c;storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题同源页面间通信&#xff0c;storage事件监听 参考博客&#xff1a;h5 storage事件监听 介绍 当同源页面的某个页面修改了localStorage,其余的同源页面只…
阅读更多...
最新文章

Copyright @ 2022~2023