JS实现waterfall

js 实现waterfall

引用：https://github.com/Krryxa/krry_wallpaper

代码：

<!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>Img js</title><style>.masonry {width: 100%;position: relative;}.item {z-index: 10;transition: .25s;overflow: hidden;position: absolute;}.item img {width: 100%;height: 100%;transition: .25s;}.item:hover img {z-index: 100;transition: .25s;overflow: hidden;animation: bounceIn .25s ease-in 2 alternate;}@keyframes bounceIn {100% {transform: scale(1.07);}}</style></head><body><div class="masonry"><div class="item"><img class="lazy" src="/img/769df24a75dc4146.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/8f8cbf44b7f2f750.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/92094defb368e7f2.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/c2b843b414977435.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/c6e846a3390ce300.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/640e766c7c6499f2.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/3f05c95d3e4c4cc0.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/de9b8d90895134da.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/ac1025432d967024.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/306818e65b4f1410.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/d36357ab0ae5dd5e.jpg" alt=""></div><div class="item"><img class="lazy" src="/img/d360438a93cf93cb.jpg" alt=""></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script>//瀑布流效果//这里有一个坑（已经修复）：//因为是动态加载远程图片，在未加载完全无法获取图片宽高//未加载完全就无法设定每一个item(包裹图片)的top。//item的top值：第一行：top为0//            其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度//                   就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）//item的left值：第一行：按照每块item的宽度值*块数//             其他行：与自身上面一块的left值相等function waterFall() {// 1- 确定图片的宽度 - 滚动条宽度var pageWidth = getClient().width - 8;var columns = 3; //3列var itemWidth = parseInt(pageWidth / columns); //得到item的宽度$(".item").width(itemWidth); //设置到item的宽度var arr = [];$(".masonry .item").each(function (i) {var height = $(this).find("img").height();var width = $(this).find("img").width();var bi = itemWidth / width; //获取缩小的比值var boxheight = parseInt(height * bi); //图片的高度*比值 = item的高度if (i < columns) {// 2- 确定第一行$(this).css({top: 0,left: (itemWidth) * i});arr.push(boxheight);} else {// 其他行// 3- 找到数组中最小高度  和 它的索引var minHeight = arr[0];var index = 0;for (var j = 0; j < arr.length; j++) {if (minHeight > arr[j]) {minHeight = arr[j];index = j;}}// 4- 设置下一行的第一个盒子位置// top值就是最小列的高度 $(this).css({top: arr[index],left: $(".masonry .item").eq(index).css("left")});// 5- 修改最小列的高度 // 最小列的高度 = 当前自己的高度 + 拼接过来的高度arr[index] = arr[index] + boxheight;}});}//clientWidth 处理兼容性function getClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight}}// 页面尺寸改变时实时触发window.onresize = function () {//重新定义瀑布流waterFall();};//初始化window.onload = function () {//实现瀑布流waterFall();}</script>
</body></html>

效果格式（图片来自引用文章）：

至此，结束。

JS实现waterfall相关推荐

js：nodejs通过async异步提交事务数据
一,async异步编程 1,异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等 waterfall ...
瀑布流布局(原生js,jQuery实现)
项目地址: 瀑布流布局实战阅读人群: 懂html,css,js,jquery的coder 阅读时间: 60minutes 1. 瀑布流式布局简介什么是瀑布流布局一种网站页面布局,视觉表现为参差不 ...
vue 实现瀑布流布局的组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐.琳琅满目.唯美的视觉效果,该布局随 ...
前端系列之jQuery(jQuery瀑布流布局)
瀑布流简介瀑布流--瀑布流式布局一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用此布局的网站是Pinterest,逐渐 ...
AJAX——瀑布流布局
瀑布流案例封装jQuery瀑布流插件 //特点分析: //1. 跟以前的瀑布流不一样的是,这次的瀑布流固定版心为1200px //2. 瀑布流固定摆放5列,每一列的宽度固定为232px.//思路分析 ...
html瀑布流布局layui,瀑布流插件jquery.waterfall.js 的使用
美腿图库,冲!冲!冲 $(function() { $('#div1 a').lightBox(); }); .jq22-container { margin-top: 50px; } #div1 { ...
一篇文章带你搞懂JS对象的自我销毁
在日常的JS组件开发中,往往会有一些较为复杂的DOM操作及事件监听,尤其是在处理UI层面的widgets时候更为明显.常常会花很多精力在对象的init上,而当组件需要被移除时则仅仅是把所在DOM草草的 ...
【转】Node.js最新Web技术栈（2015年5月）
nodejs是比较简单的,只有你有前端js基础,那就按照我的办法来吧!一周足矣推荐技术栈 express 4.x (express最新版本,初学者先别去碰koa) mongoose(mongodb) ...
做出的一个图片的自动展示效果(JS版本)
在国外的网站看到一个很不错的图片自动展示效果,于是就自己做了起来,在查看代码时发现是一个JavaScript爱好者自己写了一个库文件来调用,确实看的不太懂,但效果是做出来了,页面的调用代码只需引用固定 ...
【转】关于WaterFall瀑布流式布局的性能优化
市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ ...

JS实现waterfall

JS实现waterfall相关推荐

最新文章

热门文章