JavaScript实现瀑布流图片效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现瀑布流图片效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2722字，纯文字阅读大概需要4分钟。
内容图文
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的JavaScript实现瀑布流图片效果全部内容，希望文章能够帮你解决JavaScript实现瀑布流图片效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】