【网站开发】实现瀑布流布局（css和jquery两种方式）

本文介绍: 要实现网站瀑布流效果，可以使用HTML、CSS和jquery来完成。。

第一种方式：使用CSS和Jav aScri p t来实现

在这里插入图片描述

&lt;div class="waterfall-container"&gt;
    &lt;!-- 第一列 --&gt;
  &lt;div class="waterfall-column"&gt;
    <div class="waterfall-item"&gt;
      <!-- 第一列第一个内容 --&gt;
       <div class="waterfall_item_box"&gt;</div&gt;
    </div&gt;
    <div class="waterfall-item"&gt;
     	<!-- 第一列第二个内容 --&gt;
       <div class="waterfall_item_box"></div>
    </div>
    <!-- ... -->
  </div>
  
   <!-- 第二列 -->
  <div class="waterfall-column">
    <div class="waterfall-item">
      <!-- 第二列第一个内容 -->
      <div class="waterfall_item_box"></div>
    </div>
    <div class="waterfall-item">
      <!-- 第二列第二个内容 -->
       <div class="waterfall_item_box"></div>
    </div>
    <!-- ... -->
  </div>
</div>

<style>
	.waterfall-container {
	  display: flex;
	  justify-content: space-between;
	}
	
	.waterfall-column {
	  flex: 1;
	}
	
	.waterfall-item {
	  margin-bottom: 20px;
	  background-color: #f2f2f2;
	  border-radius: 5px;
	  padding: 10px;
	}
</style>


		<script>
			window.addEventListener('load', function() {
				// 获取所有的瀑布流列
				const columns = document.querySelectorAll('.waterfall-column');

				// 遍历每个瀑布流列
				columns.forEach(column => {
				// 获取当前列的所有项
				const items = column.querySelectorAll('.waterfall-item');

				// 遍历每个瀑布流项，设置自适应高度
				items.forEach(item => {
					// 获取项的内容高度
					const contentHeight = item.querySelector('.waterfall_item_box').offsetHeight;

					// 设置项的高度为内容高度
					item.style.height = contentHeight + 'px';
					// item.style.height = '200px'; // 固定高度
     				// item.style.height = Math.floor(Math.random() * 200 + 100) + 'px'; // 随机高度
					});
				});
			});
		</script>

第二种方式：

注意要引入jQuery库。
在这里插入图片描述

代码 如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="html/js/jquery.min.js"></script>   //引入jq库
		<style>
			 .waterfall{
			        position: relative;
			        margin: 0 auto;
			    }
			    .column{
			        position: absolute;
			        width: 200px;
			        margin: 4px;
			        border: 1px solid #ddd;
			        transition: all 1s;
			    }
			    .column img{
			        width: 100%;
			        height: 100%;
					display: block;
			    }

		</style>
	</head>
	<body>
		<div class="waterfall">
			<div class="column">
				<img src="https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=800&amp;h=1200" alt="Image 1">
			</div>
			<div class="column">
				<img src="https://img1.baidu.com/it/u=1458656822,2078909008&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=500&amp;h=750" alt="Image 2">
			</div>
			<div class="column">
				<img src="https://img.zhisheji.com/bbs/forum/201401/05/153945tbr7pg5torfzptso.jpg" alt="Image 2">
			</div>
			<div class="column">
				<img src="https://img1.baidu.com/it/u=1458656822,2078909008&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=500&h=750" alt="Image 2">
			</div>
			...
		
		</div>
	</body>
	<script>
		$(function(){
		    init();
		    $(window).on('resize',function(){//重新加载
		        init();
		    });
		})
		 
		function init(){
		    var boxWidth=$(".column").outerWidth(true);
		    // 获取每个小盒子的宽度 包括margin、padding、border
		    var cols=parseInt($(window).width()/boxWidth);
		    // 获取列数
		    var heightArr=[];
		    for(var i=0;i<cols;i++){
		        heightArr.push(0);
		    };
		 
		    //遍历每一张图片
		    $(".column").each(function(index,column) {
		        var idx=0;
		        var minBoxHeight=heightArr[0];
		        // 获取最小高度
		        for(var i=0;i<heightArr.length;i++){
		            if(heightArr[i]<minBoxHeight){
		                minBoxHeight=heightArr[i];
		                idx=i;
		                // 获取最小高度的索引
		            }
		        };
		 
		        // 设置图片的样式
		        $(column).css({
		            left:boxWidth*idx,
		            top:minBoxHeight
		        });
		        heightArr[idx]+=$(column).outerHeight(true);
		 
		    });
		};
	</script>
</html>