原生js瀑布流效果，css+html+js，复制下来可直接使用

html里面总共需要引入三个文件

css文件两个，js代码一个；；；json文件里面的图片就自己增改把

html页面

<div class="container" id="fallsBox"><div class="column"><!-- <div class="item"><a href=""><div class="pic-box" style="height: 300px;"><img src="data:images/10.jpg" alt=""></div><p class="desc-box"> </p></a></div> --></div><div class="column"></div><div class="column"></div></div><div class="loadMoreBox">别划了,没有了</div>

css页面

html,
body {min-height: 100%;background: #D6D7DB;overflow-x: hidden;
}.container {box-sizing: border-box;margin: 20px auto;width: 760px;display: flex;justify-content: space-between;align-items: flex-start;
}.container .column {width: 240px;
}.container .column .item {margin-bottom: 10px;padding: 5px;background: #FFF;box-shadow: 3px 3px 10px 0 #222;
}.container .column .item a {display: block;
}.container .column .item .pic-box {/* height: ; 盒子的高度是由图片高度决定的，而且在最开始没有加载真实图片的时候，盒子的高度也要是最后真实渲染图片的高度「动态处理」*/background: #F4F4F4;
}.container .column .item .pic-box img {display: block;width: 100%;height: 100%;opacity: 0;transition: opacity .3s ease;
}.container .column .item .desc-box {margin-top: 5px;color: #000;font-size: 12px;line-height: 20px;
}.loadMoreBox {display: none;height: 50px;line-height: 50px;text-align: center;font-size: 14px;color: #999;background: transparent;
}

需要引入到html里面的css，建议创建一个css文件

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,select,textarea{font-size:100%;outline:0}button,input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clearfix:after{display:block;height:0;content:"";clear:both}

js页面

(function () {const fallsBox = document.querySelector("#fallsBox"),columns = Array.from(fallsBox.querySelectorAll(".column")),loadMoreBox = document.querySelector(".loadMoreBox"); let data = [],//存储从服务器获取的数据num=0;//创建监听器：监听图片所在的盒子，当完全出现在视口中的时候，让其实现真实图片加载const obimg = new IntersectionObserver(changes => {// console.log(changes);//循环数组，哪一项出现在视口中，把哪一项做延迟加载changes.forEach(item => {let { isIntersecting, target } = item;if (isIntersecting) {let imgbox = target.querySelector('img');imgbox.src = imgbox.getAttribute('data-img');imgbox.onload = () => {imgbox.style.opacity = 1;};//处理完移除监听obimg.unobserve(target);}})}, { threshold: [1] })//创建监听器：监听loadMoreBox是否出现在可视窗口，出现代表触底了const obLoad = new IntersectionObserver(changes=>{ let [item] = changes;if(item.isIntersecting){setTimeout(()=>{query();render();num++;//记录加载多少次if (num >= 3) {//加载结束obLoad.unobserve(loadMoreBox);loadMoreBox.innerHTML = '完事了,别划了'};},500)    };});obLoad.observe(loadMoreBox);//基于Ajax从服务器获取数据const query = function query() {let xhr = new XMLHttpRequest;xhr.open('GET', './data.json', false);xhr.onreadystatechange = () => {let { readyState, status, responseText } = xhr;if (readyState === 4 && status === 200) {data = JSON.parse(responseText);}}xhr.send()};//实现数据绑定 瀑布流不规则排列效果const render = function render() {//@1计算数据组=中每一张图片真实渲染的高度=渲染的宽度230/(真实宽度/真实高度)data = data.map(item => {let { width, height } = item;//获取真是的宽高item.width = 230;item.height = Math.round(230 / (width / height));return item;});// console.log(data);//@2 每三个为一组进行数据循环,经过排序后，插入到同样排序后的指定列中for (let i = 0; i < data.length; i += 3) {let group = data.slice(i, i + 3);//从数组中选中三条数据//从第二组开始，需要对数据和列进行排序if (i > 0) {group.sort((a, b) => a.height - b.height);columns.sort((a, b) => b.offsetHeight - a.offsetHeight)}//迭代这组中的三条数据：动态创建<div class='item'>...</div>这样的盒子，插入到columns中相同索引列中即可group.forEach((item, index) => {let { pic, title, link, height } = item;let div = document.createElement('div');div.className = 'item';div.innerHTML = ` <a href="${link}"><div class="pic-box" style="height: ${height}px;"><img src="" data-img='${pic}' alt=""></div><p class="desc-box">${title}</p></a>`columns[index].appendChild(div);//每当插入页面中一项，就需要把其中的pic-box放在监听器中去监听obimg.observe(div.querySelector('.pic-box'));});};};query();render();setTimeout(() => {document.documentElement.scrollTop = 0;loadMoreBox.style.display = 'block';}, 500);
})();

创建一个data.json的文件，

[{"id": 1,"pic": "img/1.webp","width": 300,"height": 200,"title": "那欣长健美的身材,优雅迷人的风度,尤其是那一头乌亮的秀发,有一种说不出的魅力","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 2,"pic": "img/2.webp","width": 300,"height": 433,"title": "我所想的一切逃不出你的眼睛。”想让她感到自己是超级女神吗?不管是在她端菜上桌的时候,还是她为你买礼物的时候,你都说这句话,让她觉得她了解你胜于你了解自己。这样,不用要求,她也会给予你更多","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 3,"pic": "img/3.webp","width": 300,"height": 170,"title": "自爱，使你端庄；自尊，使你高雅；自立，使你自由；自强，使你奋发；自信，使你坚定……这一切将使你在成功的道路上遥遥领先！","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 4,"pic": "img/4.webp","width": 300,"height": 300,"title": "如果把三十岁的女人比作一本书，那么这本书有美丽、精致的封面，也有回肠荡气的故事情节，更有让人潸然泪下、肝肠寸断的温柔，每一页都让人有未知的情节，莫名的惊喜，即使有一天，生命走到了尽头，掩卷沉思，依然可以体会其中蕴涵的丰富的哲理！既如诗也如画的女人呦！","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 5,"pic": "img/5.webp","width": 300,"height": 170,"title": "因为你对于我这样重要，因为我对于你这样需要，因为你的爱给了我无尽的欢笑，因为你是我生命的支柱——一切打算和行动都靠你扶持，一辈子都要你看到，我爱你何等诚挚！","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 6,"pic": "img/6.webp","width": 300,"height": 257,"title": "在风吹你的散发时，我简直着魔了：在闪闪发光的披肩柔发中，在淡淡入鬓的蛾眉问，在碧水漓漓的眼睛里，你竟是如此美丽可人！","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 7,"pic": "img/7.webp","width": 300,"height": 400,"title": "我喜爱你那有如白杨树的个性：坚挺、正直、质朴，也不缺乏温和。我以有你这样的良师益友而深感幸福和快乐。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 8,"pic": "img/8.webp","width": 300,"height": 200,"title": "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 9,"pic": "img/9.webp","width": 300,"height": 257,"title": "你带着一串笑声从屋外走进客厅，轻松随便地穿一套红色运动衫，那么美丽多姿，那么热情似火，又那么恬淡简朴，一种不可名状的爱慕之情，蓦然在我心中升起。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 10,"pic": "img/10.webp","width": 300,"height": 408,"title": "“你真漂亮。”如果要列出女人最不可缺的三样事物，很可能就是食品、衣服和赞美的话语。所以，有机会就要大力赞美她，不要迟疑。赞美越多，你得到的回报越多。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 11,"pic": "img/11.webp","width": 300,"height": 433,"title": "泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 12,"pic": "img/12.webp","width": 300,"height": 408,"title": "你是一尊象牙雕刻的女神，大方、端庄、温柔、姻静，无一不使男人深深崇拜。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 13,"pic": "img/13.webp","width": 300,"height": 400,"title": "美女在您面前自惭形秽，帅男甘愿死于您的石榴裙下，孩子见了您亲切热烈，老人见了您感怀青春，病人见了您立即健康，甚至残疾人都会因您而断臂再生、瞎眼重明。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 14,"pic": "img/14.webp","width": 300,"height": 170,"title": "走过春的浪漫，走过秋的成熟，走过夏的火热，走过冬的冷竣，在四季的轮回中，走出少女的羞涩，走出青春的靓丽，步入了30多岁的瑰丽季节。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 15,"pic": "img/15.webp","width": 300,"height": 451,"title": "美丽女人人人欣赏，温柔女人人人渴望，贤淑女人人人夸奖，纯洁女人心地善良，开朗女人眼睛雪亮，看信息的女人最漂亮。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 16,"pic": "img/16.webp","width": 300,"height": 170,"title": "“遇到你我觉得很幸运。”告诉她，她是你的唯一，你的生命因为有她才美丽，当她为此脸色绯红，请不要感到奇怪。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 17,"pic": "img/17.webp","width": 300,"height": 451,"title": "美丽于中年女人而言是在漫漫地流失，使她们不知所措。多姿多彩的生活正离中年女人远去，她们日复一日从单位走到自己的家，再从家走到单位，这样年复一年地重复地奔波着，有的只是空虚和寂寞陪伴着她们，有的总是处理不完的家务。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 18,"pic": "img/18.webp","width": 300,"height": 188,"title": "中年女人就这样单调、简单、重复地工作和生活，大街上那灯红酒绿的枚不胜数的休闲场所与她们无缘，她们实在有太多的。繁杂事务。正是她们用那看上去并不强壮、甚至很柔弱的臂膀挑起了家庭，挑起了事业，才使我们这个社会看上去很繁华、很稳定。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 19,"pic": "img/19.webp","width": 300,"height": 300,"title": "你娓娓的情语，虽然朴实，却是最真挚优美感人的诗句，我将把它们牢牢谨记，我的琴弦也将为你奏出澎湃的交响曲。","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"},{"id": 20,"pic": "img/20.webp","width": 300,"height": 400,"title": "在风吹干你的散发时，我简直着魔了：在闪闪发光的披肩柔发中，在淡淡入鬓的蛾眉问，在碧水漓漓的眼睛里……你竟是如此美丽可人！","link": "https://baike.sogou.com/v1850208.htm?fromTitle=%E9%9C%89%E9%9C%89"}]

原生js瀑布流效果，css+html+js，复制下来可直接使用相关推荐

网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
原生JS实现瀑布流效果
前两天通过B站在极客学院学习了JS动态瀑布流效果:主要是HTML+CSS控制样式,通过JS实现全局瀑布流样式,以及通过访问自定义的JSON字符串,实现图片无限加载:现对其代码进行整理,供日后学习参考. ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
通过JS实现瀑布流效果
JS实现瀑布流效果效果图 HTML部分以及css样式 <head><meta charset="UTF-8"><meta http-equiv=&q ...
瀑布流效果Demo总结（5）之基于jquery+blocksit.min.js的实现
1.综述最近研究了时下流行的瀑布流展示效果. 当前共计尝试的方法及其优缺点如下: (1)基于JQuery框架及blocksit.min.js实现的瀑布流不连续,每列中多多少少都会有一些位置出现空白. ...
html li 做瀑布流,使用js来实现瀑布流效果
使用js来实现瀑布流效果瀑布流的实现方法有很多种,我这次采用的是使用绝对定位的方法来实现.页面中包含一个容器ul(设置为relative),然后所有添加的li都放在这个容器里面,li的宽度固定.在l ...
css浮动+应用（瀑布流效果的实现）
首先是index.html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
《uni-app》移动端纯CSS实现不等高的瀑布流效果
<uni-app>移动端纯CSS实现不等高的瀑布流效果前言示例 WEB端示例移动端示例瀑布流实现第一种: flex 核心代码实现缺点完整代码第二种:column-coun ...
javascript瀑布流效果
javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

原生js瀑布流效果，css+html+js，复制下来可直接使用

原生js瀑布流效果，css+html+js，复制下来可直接使用相关推荐

最新文章

热门文章