Home > Developer > JavaScript
Waterfall layouts are suitable for small chunks of data, each with similar content and no emphasis. In general, as the page scroll bar scrolls down, this layout also continuously loads the data block and attaches it to the current trailer. So, our image is called this type of layout as waterfall flow layout.
Prior to this, we implemented this type of layout with CSS, usually in the following two ways:
1. Traditional multi-column floating
Although this layout is simple, there is no need to know the height of the data block explicitly. However, if the size of the browser window changes, only the X column can be fixed, it is difficult to adjust the data block arrangement.
2.CSS Multi-Column layout
You need to use one of the properties in CSS3: column. We need to specify the number of columns, column spacing, column middle border, column width of the container to implement
#container { -webkit-column-count:5; /*-webkit-column-gap:10px; -webkit-column-rule:5px solid #333; -webkit-column-width:210px;*/ -moz-column-count:5; /*-moz-column-gap:20px; -moz-column-rule: 5px solid #333; -moz-column-width:210px;*/ column-count:5; /*column-gap:10px; column-rule:5px Solid #333; column-width:210px;*/ }So, let's consider using JavaScript to achieve the waterfall flow layout under absolute positioning.
Let's talk about the realization of the idea:
As for how we create a project, how to add the picture resources into these phala trivial things, I will no longer say (Ps. hahaha ~ ~ ~ How to do, is lazy. Also Wayward O (∩_∩) o)
In the HTML file, we first use a few div models to act as containers, containing the content we want to put in, and here we use the image Waterfall stream form to show
<body><div id= "Contenter" > <div class= "box" > <div class= "box_img" > </div> </div> <div class= "box" > <div class= "box_img" > </div> </div> <div class= "box" > <div C lass= "Box_img" > </div> </div> <div class= "box" > <div class= "box_img" > </div> </div> <div class= "box" > <div class= "box_img" > </div& Gt </div> <div class= "box" > <div class= "box_img" > </div> </div> <div class= "box" > <div class= "box_img" > </div> <div class= "box" > <div class= "box_img" > </div> </div> <div class=" box "> <div class=" box_img "> </div> </div> <div class= "box" > <div class= "b Ox_img "> </div> </div></div></body>At the beginning, we load 10 images by default, and then we change their style in the CSS file.
*{ margin:0; padding:0;} /* The parent container uses a relative positioning method */#contenter { position:relative;} /* Float */.box{float:left to the left ; padding:5px;}. box_img{ padding:5px; border:1px solid #cccccc; box-shadow:0 0 5px #cccccc; border-radius:5px;}. Box_img img{ width:200px; Height:auto;}/** * Created by PC on 2015/8/28. */window.onload = function () {imglocation ("Contenter", "box"); var imgdata = {"Data": [{"src": "img12.jpeg"},{"src": "img13.jpg"},{"src": "img14.jpg"},{"src": "img15.jpeg"},{"src": " Img16.jpeg "},{" src ":" img17.jpeg "},{" src ":" Img18.jpeg "}]}; /* Constantly loading new content */Window.onscroll = function () {if (Checkflag ()) {var parentid = document.getElementById ("C Ontenter "); for (var i =0;i
Finally, is the final realization of the effect (my family dear love and Rin, do not stop me, crazy lick screen ~ ~ ~)
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JavaScript for waterfall flow layout and automatic page loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
