js+css实现瀑布流
2024-06-05 15:34:25
瀑布流是一种很常见的布局，实现的方法也有很多，以下是仿照花瓣网的瀑布流展示，希望能帮到各位小主们。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body{background: #f5f5f5;}.wrapper {margin: 30px auto;position: relative;}.CascadeFlowItem {width: 236px;font-size: 12px;background-color: #fff;box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);border-radius: 3px;overflow: hidden;-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .02), 0 4px 8px rgba(0, 0, 0, .02);position: absolute;}.img {width: 100%;height: auto;}.description {display: block;padding: 0 16px;margin: 10px 0;line-height: 1.35em;overflow: hidden;word-wrap: break-word;}.bottom_line {color: #999;border-top: 1px solid #F2F2F2;background: #FAFAFA;position: relative;height: 50px;display: flex;align-items: center;padding: 0 15px;box-sizing: border-box;background-color: #fff;}.bottom_line>a {color: #9E7E6B;}.author {max-width: 75px;}.sub_board {max-width: 75px;}.ellipsis {overflow: hidden;text-overflow: ellipsis;display: inline-block;white-space: nowrap;-webkit-line-clamp: 1;}.label {color: #999;}</style>
</head><body><div class="container"><div class="wrapper"></div></div><script>let list = [{img: './images/1.png',description: "EE, M4 Miv4t",author: "懶懶懶",sub_board: "插画"},...等];let wrapper = document.getElementsByClassName('wrapper')[0];let wrapper_html = ``;for (var i = 0; i < list.length; i++) {wrapper_html = wrapper_html +`<div class="CascadeFlowItem" ><img class="img" src="${list[i].img}"><p class="description">${list[i].description}</p><div class="bottom_line"><a href="javascript:void(0);" class="ellipsis author">${list[i].author}</a><span class="label"> 采集到 </span><a href="javascript:void(0);" class="ellipsis sub_board">${list[i].sub_board}</a></div></div>`}wrapper.innerHTML = wrapper_html;function waterFall() {let bodyWidth = getSize().width - 300;let list = document.getElementsByClassName('CascadeFlowItem');let itemWidth = 236;//每个盒子的宽是固定的let wrapperTop = 30;let itemMarginRight = 20;//盒子与盒子之间的距离let itemMarginTop = 20;//盒子与盒子之间的距离let heightArr = [];//所有高度let rowHeightArr = [];//每一行的高度let col = Math.floor(bodyWidth / (itemWidth + itemMarginRight));//列数//console.log(list)for (var i = 0; i < list.length; i++) {heightArr.push(window.getComputedStyle(list[i]).height.split('px')[0] * 1);}for (var i = 0; i < list.length; i++) {if (i < col) {//确定第一行list[i].style.top = wrapperTop + 'px';list[i].style.left = itemWidth * i + itemMarginRight * i + 'px';rowHeightArr.push(heightArr[i]);} else {let minHeight = rowHeightArr[0];var index = 0;for (var j = 0; j < rowHeightArr.length; j++) {if (minHeight > rowHeightArr[j]) {minHeight = rowHeightArr[j];index = j;}}//设置其他行list[i].style.top = wrapperTop + minHeight + itemMarginTop + 'px';list[i].style.left = itemWidth * index + itemMarginRight * index + 'px';//更新最小的高rowHeightArr[index] = rowHeightArr[index] + heightArr[i] + itemMarginTop;//console.log(rowHeightArr)}}//console.log(heightArr)//设置wrapper的宽和高wrapper.style.cssText=`width: ${(col * itemWidth + itemMarginRight * (col - 1) + 'px')};height: ${(rowHeightArr.slice(0).sort(function (a, b) { return b - a })[0] + 80 + 'px')}`;}function getSize() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight}}window.onload=function(){waterFall();}window.onresize=function(){waterFall();}</script>
</body></html>
效果图：
js+css实现瀑布流相关推荐
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css">body,html{margin: 0;padding:0;}#container{position ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- 使用css实现瀑布流的效果
使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式. 注意要设置列数 图片的宽度要一致,否则图片显示会有问题 <!DOCTYPE html> <html la ...
- html li 做瀑布流,使用js来实现瀑布流效果
使用js来实现瀑布流效果 瀑布流的实现方法有很多种,我这次采用的是使用绝对定位的方法来实现.页面中包含一个容器ul(设置为relative),然后所有添加的li都放在这个容器里面,li的宽度固定.在l ...
- 原生 JS 实现一个瀑布流插件
更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
- 瀑布流代码PHP,JS代码实现瀑布流插件
瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解,对此有 ...
- 流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录 瀑布流的定义 一.实现效果 代码 首先是用javascript自己手写代码实现照片瀑布流 使用插件Mary.js照片流插件实现照片瀑布流 总结 瀑布流的定义 瀑布流是什么? 1.琳琅满目:整 ...
- jq js css3 实现瀑布流
css3:只是设置列宽属性 简单明了 大要实现无限下拉还是需要靠js <!doctype html> <html lang="en"> <head& ...
- html 瀑布流样式,纯css如何实现瀑布流？css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
- JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局 原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
最新文章
- java中web service的几种实现方式（自用）
- 提升系统 10 倍性能的 10 个建议！
- python【力扣LeetCode算法题库】15- 三数之和
- python 调用linux命令-Python调用shell命令常用方法
- Stanford Machine Learning
- WebKit Loader模块介绍
- 如何提高SSD的使用寿命
- 怎样让电脑速度变快_双11的笔记本电脑怎么买？哪些轻薄款的最好？
- mysql5.623 GTID主从复制+半同步复制安装与配置
- java提高篇四_(转)java提高篇(四)-----理解java的三大特性之多态
- JavaScript Math 对象
- html实现牌匾效果,4款店面牌匾设计效果图 店铺门头亚克力牌匾样式制作设计图...
- my04_Mysql复制数据一致性校验
- 纬地道路纵断面设计教程_市政道路从识图算量到施工，一篇全搞定
- Allegro SigXplorer 等长设置方法-比较简单
- 全国高校经纬度（txt版）
- Android Fingerprint属性
- mac M1安装SVN错误Error: Command failed with exit 128: git
- TV端影视APP开发搭建需要注意哪些问题？
- Linux下使用为知笔记的坑和解决办法