js native waterfall flow plug-in production
|
This article shares the specific code of the js native waterfall flow plug-in for your reference. The specific content is as follows See the effect first
It is the same as the normal waterfall flow. When calling, you need to pass in the container, image and image width to directly generate the waterfall flow. Without further ado, let's look at the code and then talk about the idea. 1.html and call, where HTML only needs one line <body>
<div class="main"></div>
<script src="index.js"></script>
<script>
// The first parameter, waterfall container var dom = document.getElementsByClassName("main")[0];
// The second parameter, the picture link, is written into an array var imgArr = ["img/0.jpg","img/45.jpg","img/225.jpg","img/3.png","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png","img/0.jpg","img/3.png","img/45.jpg","img/225.jpg","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png",];
//Call the plug-in and pass in parameters. The third one is the image width.waterFallFlow(dom,imgArr,220);
</script>
</body>2. HTML corresponding to CSS .main is the container passed in, where position: relative; is required Then .main img{transition: all 0.5s;} is the animation code, which is added to all the images in the container .main{
border: 1px solid #ccc;
width: 90%;
margin: 0 auto;
position: relative;
}
.main img{
transition: all 0.5s;
}Then js /**
* @param {*} dom represents the waterfall container* @param {*} imgArr image array* @param {*} wid image width*/
function waterFallFlow(dom, imgArr, wid) {
var gap; //gap var colNumber; //number of columns imgDom();
setImgPos();
//When the window changes window.onresize = function(){
setImgPos();
}
/**var timer = null;
* It's smooth as written above, but it affects performance too much. When dragging the window, * the function is called very frequently to re-shoot and arrange the pictures *
* You can do this, anti-shake*
* window.onresize = function(){
* if(timer){
* clearIntval(timer);
* }
* timer = setTimeout(function(){
* setImgPos();
* },300);
* }
*
*/
// Generate DOM element function imgDom() {
for (let i = 0; i < imgArr.length; i++) {
const url = imgArr[i];
let img = document.createElement("img");
img.src = url;
img.style.width = wid + "px";
img.style.position = "absolute";
// All images use absolute positioning img.style.left = "";
img.style.top = "";
img.onload = function(){
setImgPos(); //Asynchronous loading of pictures}
dom.appendChild(img);
}
}
// Set the coordinates of each image function setImgPos() {
cal();
var colY = new Array(colNumber); //Store the Y coordinate of the next image in each column colY.fill(0); //Fill the array to 0
for (let i = 0; i < dom.children.length; i++) {
var imgM = dom.children[i];
var y = Math.min(...colY); // find the minimum value var index = colY.indexOf(y); // column var x = (index + 1) * gap + index * wid;
imgM.style.left = x + "px";
imgM.style.top = y + "px";
//Update array colY[index] += parseInt(imgM.height)+gap;
}
//Find the largest number in the array to solve the parent div collapse problem var h = Math.max(...colY);
console.log(h);
dom.style.height = h + "px";
}
// Calculate relevant data function cal() {
var containerWidth = parseInt(dom.clientWidth);
colNumber = Math.floor(containerWidth / wid); //Number of columns var space = containerWidth - colNumber * wid;
gap = space / (colNumber + 1); //Calculate the gap}
}Basically I have written comments, you can understand them Let's see the idea 1. Accept the passed parameters, container, image array, image width 2. Create a picture element and add it to the corresponding container 3. Set the width and height of each picture, calculate the number of columns and spacing 4. Arrange the pictures using absolute positioning and calculate the corresponding left and top values, that is, the corresponding x and y coordinates The first three steps should be fine, let's look at the fourth step The idea is this
The main idea is to find the shortest column to arrange the next picture. Now the shortest appears in the second column.
At this time, the picture is added to the second shortest column. Now continue to find the shortest column and continue to add pictures.
This way, the arrangement of the waterfall flow is completed. Let's take a look at the specific process First, calculate how many columns of images there are, create an array with a length equal to the number of columns, fill all with 0, and use it to store the y coordinates later.
Traverse the sub-elements in the container, find the minimum value in the current array in the loop, and the position (column number) of the minimum value is the y coordinate
Now we can find the x coordinate. x = (number of columns + 1) * spacing + current column * width (the actual parameter passed in) So there is a place
Note that you need to update the array every time, that is, modify the y coordinate of the added image position and the asynchronous loading of the image. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to simply configure multiple servers in nginx
>>: HTML tag marquee realizes various scrolling effects (without JS control)
Recommend
Methods and techniques for quickly displaying web page images
1. Use .gifs rather than .jpgs. GIFs are smaller ...
Ubuntu 19.10 enables ssh service (detailed process)
It took me more than an hour to open ssh in Ubunt...
How to solve "Unable to start mysql service error 1069"
Today, when I was on the road, a colleague sent m...
Vue uses v-model to encapsulate the entire process of el-pagination components
Use v-model to bind the paging information object...
Detailed explanation of HTML table inline format
Inline format <colgroup>...</colgroup>...
Detailed Analysis of Event Bubbling Mechanism in JavaScript
What is bubbling? There are three stages in DOM e...
7 native JS error types you should know
Table of contents Overview 1. RangeError 2. Refer...
Detailed explanation of Linux lsof command usage
lsof (list open files) is a tool to view files op...
How to use HTML+CSS to create TG-vision homepage
This time we use HTML+CSS layout to make a prelim...
Detailed explanation of the deep and shallow cloning principles of JavaScript arrays and non-array objects
Table of contents What are shallow cloning and de...
Detailed explanation of the basic usage of SSH's ssh-keygen command
SSH public key authentication is one of the SSH a...
Tutorial on adjusting the size of lvm logical volume partition in Linux (for different file systems such as xfs and ext4)
Preface When we installed the system, we did not ...
How to create Apache image using Dockerfile
Table of contents 1. Docker Image 2. Create an in...
MySQL practical window function SQL analysis class students' test scores and living expenses
Table of contents 1. Background 2. Table creation...
Method of realizing automated deployment based on Docker+Jenkins
Use Code Cloud to build a Git code storage wareho...