时间:2021-05-26
本文实例为大家分享了js实现瀑布流图片效果的具体代码,供大家参考,具体内容如下
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ position: relative; list-style: none; margin: 0 auto; } #wrap li{ width: 200px; font-size: 1.5rem; position: absolute; background-color: #CCCCCC; -webkit-transition: all 2s; } #wrap li div{ width: 100%; height: 100%; overflow: hidden; } </style></head><body><ul id="wrap"></ul></body><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">$(function(){function randomFunction(max , min){ return parseInt(Math.random() * (max - min)) + min;}var wrapUL = document.getElementById("wrap");var width = 200;var rightPadding = 10;var hs = [];var num = 0;function setLiPos(bol){ var lis = wrapUL.getElementsByTagName("li"); var windowBody = document.documentElement.clientWidth; var cols = parseInt(windowBody / width); wrapUL.style.width = cols * (width + rightPadding) + "px"; var arrT = []; for (var i = 0; i < cols; i++) { arrT[i] = 0; } function createLi(index){ var li = lis[index]||document.createElement("li"); var h = hs[index] || randomFunction(100, 300); li.style.height = h + "px"; if(bol){ hs.push(h); } var min = arrT[0]; var minIndex = 0; for (var i = 0; i < arrT.length; i++) { if(min > arrT[i]){ min = arrT[i]; minIndex = i; } } li.style.top = arrT[minIndex] + "px"; li.style.left = minIndex * (width + rightPadding) + "px"; arrT[minIndex] += (h + rightPadding); bol&&wrapUL.appendChild(li); } for(var i = 0; i < 20; i++){ if(bol){ num++; } createLi(i); }}setLiPos(true);window.onresize = function(){ setLiPos(false);}});</script><script type="text/javascript">$(function(){ var imgArr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"]; $("li").each(function(index, el) { var n = RandomNumBoth(0,imgArr.length-1); var imgsrc = imgArr[n]; $(this).html("<div><img onload='loadImage()' src='"+imgsrc+"'></div>"); });});function loadImage(){ $("img").each(function(index, el) { var a=$(this).width(), b=$(this).height(), pa = $(this).parent().width(), pb = $(this).parent().height(), e=a/b, //图片宽高比 3 pe=pa/pb; //承载图片容器宽高比 if(e>=pe){ $(this).css({height:"100%",width:"auto"}); var imgW = $(this).width(), iW = $(this).parent().width(), w = -(imgW - iW)/2; $(this).css('marginLeft',w); }else{ $(this).css({width:"100%",height:"auto"}); var imgH = $(this).height(), iH = $(this).parent().height(), h = -(imgH - iH)/2; $(this).css('marginTop',h); } });}function RandomNumBoth(Min,Max){ var Range = Max - Min; var Rand = Math.random(); var num = Min + Math.round(Rand * Range); return num;}</script></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下鼠标滚动事件,当鼠标滚动到下边,动态加载图片。1.HTML代码js实现瀑布流效果-
jquerymasonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用
本文实例讲述了js实现仿百度瀑布流的方法。分享给大家供大家参考。具体实现方法如下:仿百度图片瀑布流*{margin:0;padding:0;}#containe
vue简单实现瀑布流布局的一种方式(vue瀑布流组件),供大家参考,具体内容如下vue中的瀑布流布局组件需求:图片容器宽度固定,高度根据图片自适应,图片一行不能
本文实例讲述了thinkPHP实现瀑布流的方法。分享给大家供大家参考。具体分析如下:很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件