What is waterfall layout? How to implement waterfall flow layout
When laying out a web page, a layout method called waterfall flow layout is sometimes used. So, what does the waterfall flow layout look like? This article will introduce to you how to implement waterfall flow layout.
First of all, let’s take a look at What is the waterfall flow layout?
According to the definition on Baidu Encyclopedia, we can know that waterfall flow is also called waterfall flow layout. It is a popular website page layout. The visual performance is a jagged multi-column layout. As the page scroll bar scrolls down, this layout will continuously load data blocks and append them to the current tail.
Then let’s take a look at What is the principle of waterfall flow layout?
The principle of waterfall flow layout is that multiple divs with variable heights in the page container float unevenly and disorderly at certain intervals. When the mouse scrolls, data is constantly loaded at the tail of the container, and Automatically load to the vacant position and cycle continuously.
After reading the above definition and principle of waterfall flow layout, let's take a look at How to implement waterfall flow layout.
The core of waterfall flow layout is based on a grid layout, and the height of the item list contained in each row is random (the height changes dynamically with its own content), and each item list is arranged in a stack form. Most importantly, there is no unnecessary spacing between stacks.
Let’s take a look at the implementation code of waterfall flow layout
1. Pure css waterfall flow layout code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3瀑布流</title>
<style>
/*大层*/
.container{width:100%;margin: 0 auto;}
/*瀑布流层*/
.waterfall{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari 和 Chrome */
column-count:4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}
/*一个内容层*/
.item{
padding: 1em;
margin: 0 0 1em 0;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
border: 1px solid #000;
}
.item img{
width: 100%;
margin-bottom:10px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<img src="/static/imghw/default1.png" data-src="http://img2.imgtn.bdimg.com/it/u=1977804817,1381775671&fm=200&gp=0.jpg" class="lazy" alt="What is waterfall layout? How to implement waterfall flow layout" >
<p>风景图1</p>
</div>
<div>
<img src="/static/imghw/default1.png" data-src="http://img0.imgtn.bdimg.com/it/u=624117570,2702945706&fm=200&gp=0.jpg" class="lazy" alt="What is waterfall layout? How to implement waterfall flow layout" >
<p>风景图2</p>
</div>
<div>
<img src="/static/imghw/default1.png" data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg" class="lazy" alt="What is waterfall layout? How to implement waterfall flow layout" >
<p>风景图3</p>
</div>
<div>
<img src="/static/imghw/default1.png" data-src="http://img0.imgtn.bdimg.com/it/u=3756090549,2773217785&fm=200&gp=0.jpg" class="lazy" alt="What is waterfall layout? How to implement waterfall flow layout" >
<p>风景图4</p>
</div>
<div>
<img src="/static/imghw/default1.png" data-src="http://img4.imgtn.bdimg.com/it/u=3450240447,3799203473&fm=26&gp=0.jpg" class="lazy" alt="What is waterfall layout? How to implement waterfall flow layout" >
<p>风景图5</p>
</div>
</div>
</div>
</body>
</html>The effect of pure css waterfall flow layout is as follows:
2. The implementation code of jquery simple waterfall flow layout:
<div>
<ul>
<li><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIRotxAATQL-FHoo4AAZe7wAE3dIABNBH087.jpg" class="lazy" alt=""></li>
<li><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIc82eAATduiUrt8UAAZe7wAAAAAABN3S513.jpg" class="lazy" alt=""></li>
<li><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIa-unAATupB6epU4AAZe7gP3KS0ABO68972.jpg" class="lazy" alt=""></li>
<li><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIYAyaAAixGG1uSlAAAZe7wAJrhkACLEw058.jpg" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIDY1dAAZQlUpPjRsAAZe7gPw2IAABlCt755.jpg" class="lazy" alt=""></li>
</ul>
</div> * {
margin:0;
padding:0;
}
body {
min-height:200vh;
}
div {
width:90%;
margin:auto;
}
ul {
margin-top:10px;
list-style:none;
}
li {
border:1px solid #000;
border-radius:5px;
width:24%;
float:left;
margin-right:2px;
}
img {
width:98%;
display:block;
margin:auto;
margin-bottom:5px;
}var imgData = {
data: [{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIGWy8AAWUH9AG9zMAAZe7gPrREkABZQ3007.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJliEUgWIWzw0AAQmOu8l33oAAZe7gPdxW0ABCZS129.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"
},
{
src: "https://sjbz-fd.zol-img.com.cn/t_s120x90c/g5/M00/08/0A/ChMkJ1iEUgWIbpwIAAUz5kEUSy0AAZe7wASX0kABTP-083.jpg"
},
]
};
var count = 0;
$(window).on('scroll', function() {
$.each(imgData.data, function(index, value) {
var $oImg = $('<img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/777/668/477/1538105297150941.png" class="lazy" alt="What is waterfall layout? How to implement waterfall flow layout" >').attr('src', $(this).attr("src"));
$oImg.appendTo($('li:eq(' + count % 4 + ')'))
count++;
})
})jquery simple waterfall flow layout effect is as follows:
The above is the entire content of this article, and There are other ways to implement waterfall flow layout, such as native js to implement waterfall flow layout. I won’t go into details here. You can try to implement it yourself with js, or you can go to the PHP Chinese website to find the corresponding method.
The above is the detailed content of What is waterfall layout? How to implement waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to build infinite scroll and waterfall flow layout using Vue?
Jun 27, 2023 pm 01:32 PM
Vue.js is a popular JavaScript framework that allows developers to easily create dynamic, responsive web applications. Among them, it is especially favored by developers for its powerful component development capabilities. Infinite scrolling and waterfall flow layout have become one of the indispensable features in modern web development. This article aims to introduce how to use Vue.js, combined with some third-party libraries, to implement infinite scrolling and waterfall flow layout functions. Achieve infinite scroll infinite scroll (Infinit
How to use HTML and CSS to implement waterfall flow product display layout
Oct 21, 2023 am 09:25 AM
How to use HTML and CSS to implement waterfall flow product display layout. Waterfall flow layout is a common web design method, which is characterized by presenting an intricate, dynamic and orderly visual effect. Applying waterfall flow layout to product display web pages can improve the display effect of products and attract users' attention. This article will introduce how to use HTML and CSS to implement waterfall flow product display layout, and provide specific code examples. 1. HTML structure First, we need to build a basic HTML structure to accommodate
How to use the flex property of CSS3 to create a waterfall flow layout effect?
Sep 09, 2023 am 08:39 AM
How to use the flex property of CSS3 to create a waterfall flow layout effect? In web design, Waterfall Layout is a common and popular page layout method. It is characterized by presenting content in irregular columns and row heights, creating a waterfall-like aesthetic. In the past, implementing a waterfall layout required using complex JavaScript code to calculate the position and size of elements. However, with the development of CSS3, we can use its powerful flex property to make it simpler
Tips for implementing responsive card waterfall flow layout using CSS
Nov 21, 2023 am 08:26 AM
Tips for Implementing Responsive Card Waterfall Layout Using CSS With the popularity of mobile devices and the diversification of web content, responsive design has become one of the basic requirements of modern web development. Among them, card layout and waterfall layout have gradually become popular design styles. This article will introduce how to use CSS to implement a responsive card waterfall layout and provide specific code examples. 1. HTML structure First, we need to define the structure of a set of cards in HTML, such as using <ul> and <
How to use CSS Flex layout to implement waterfall flow layout
Sep 27, 2023 pm 04:22 PM
How to use CSSFlex elastic layout to implement waterfall flow layout. With the continuous development of web design, waterfall flow layout has become a very popular page layout method. Unlike the traditional grid layout, the waterfall flow layout can adapt to the screen size and presents a unique sense of flow. In this article, we will introduce how to use CSSFlex elastic layout to implement waterfall flow layout, and provide specific code examples. CSSFlex elastic layout is a powerful layout model that applies di
Use uniapp to achieve waterfall flow layout effect
Nov 21, 2023 am 10:25 AM
Use Uniapp to achieve waterfall flow layout effect. Waterfall flow layout is a common web page layout form. Its characteristic is that the content is arranged in irregular columns to form a waterfall flow-like effect. In mobile development, the Uniapp framework can be used to easily achieve waterfall flow layout effects. This article will introduce how to use Uniapp to implement waterfall flow layout and provide specific code examples. 1. Create the Uniapp project. First, we need to install the HbuilderX development tool on the computer.
How to implement waterfall flow layout using HTML and CSS
Oct 24, 2023 am 09:33 AM
How to use HTML and CSS to implement waterfall flow layout. Waterfall layout (Waterfall Layout) is a common web page layout method. It can make the web page content appear like a waterfall flow. The height of each column can be different, making the web page look more beautiful. Fun and action-packed. In this article, we will introduce how to use HTML and CSS to implement waterfall layout, with specific code examples. First, let's look at the required HTML structure. In order to implement waterfall flow layout, we need to use
CSS Layout Tutorial: The Best Way to Implement Waterfall Layout
Oct 20, 2023 pm 01:10 PM
CSS layout tutorial: The best way to implement waterfall layout, specific code examples are required. Waterfall layout (Waterfall Layout) is a common web page layout method. It can arrange elements of different sizes in multiple columns to give people a A waterfall-like feeling. This layout is often used for web pages that need to display multiple items, such as photo walls and product displays. This article will introduce how to use CSS to implement waterfall layout and give specific code examples. 1. Building the HTML structure First, we need to build the base
