用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道。
我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了。
然后进入下一个循环插入下一行。公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系:
h' * (w / h + y / x) = w
w是浏览器窗口的宽度,
则 h' = w / (w / h + y / x);
复制代码 代码如下:
<html>
<head>
<style>
img {
border:1px dashed #000;
display: inline-block;
z-index:-1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
//-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
//-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
//-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
//transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
</style>
<script src="/UploadFiles/2021-04-02/jquery.min.js"></head>
<body onload="display()">
<!--div id="title" style="position:absolute;width:300px;height:200px;background:red;"></div-->
<script type="text/javascript">
window.onload=display;
for (var i = 0; i < 34; ++ i) {
var div = document.createElement('div');
div.setAttribute("id", "div_" + i.toString());
div.setAttribute("style", "position:absolute");
document.body.appendChild(div);
}
for (var i = 0; i < 34; ++ i) {
var img = document.createElement('img');
img.setAttribute('src', '/images/' + 'psb_' + (i + 1).toString() + '.jpg');
document.getElementById("div_" + i.toString()).appendChild(img);
}
function display() {
var col = 0;
var row = document.body.clientWidth - 50;
var H = 250;
var h = 0;
var w = 300;
var jg = 20;
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; ++ i) {
var flag = i;
h = row / imgs[i].width * imgs[i].height;
while (h > H && i < imgs.length - 1) {
++ i;
h = row / (row / h + (imgs[i].width + jg) / imgs[i].height);
}
w = 0;
for (var j = flag; j <= i; ++ j) {
imgs[j].parentNode.style.top = (col + jg).toString() + "px";
imgs[j].parentNode.style.left = (w + jg).toString() + "px";
imgs[j].style.height = h.toString() + "px";
w = w + h / imgs[j].height * imgs[j].width + jg;
}
col += h + jg;
}
/*
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; ++ i) {
if (row + imgs[i].width > document.body.clientWidth + 100) {
++ col;
row = 0;
}
imgs[i].parentNode.style.top = (col * 250).toString() + "px";
imgs[i].parentNode.style.left = row.toString() + "px";
row += imgs[i].width + 10;
}
*/
}
window.onresize=display;
//$(window).resize(display);
</script>
</body>
</html>
我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了。
然后进入下一个循环插入下一行。公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系:
h' * (w / h + y / x) = w
w是浏览器窗口的宽度,
则 h' = w / (w / h + y / x);
复制代码 代码如下:
<html>
<head>
<style>
img {
border:1px dashed #000;
display: inline-block;
z-index:-1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
//-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
//-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
//-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
//transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
</style>
<script src="/UploadFiles/2021-04-02/jquery.min.js"></head>
<body onload="display()">
<!--div id="title" style="position:absolute;width:300px;height:200px;background:red;"></div-->
<script type="text/javascript">
window.onload=display;
for (var i = 0; i < 34; ++ i) {
var div = document.createElement('div');
div.setAttribute("id", "div_" + i.toString());
div.setAttribute("style", "position:absolute");
document.body.appendChild(div);
}
for (var i = 0; i < 34; ++ i) {
var img = document.createElement('img');
img.setAttribute('src', '/images/' + 'psb_' + (i + 1).toString() + '.jpg');
document.getElementById("div_" + i.toString()).appendChild(img);
}
function display() {
var col = 0;
var row = document.body.clientWidth - 50;
var H = 250;
var h = 0;
var w = 300;
var jg = 20;
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; ++ i) {
var flag = i;
h = row / imgs[i].width * imgs[i].height;
while (h > H && i < imgs.length - 1) {
++ i;
h = row / (row / h + (imgs[i].width + jg) / imgs[i].height);
}
w = 0;
for (var j = flag; j <= i; ++ j) {
imgs[j].parentNode.style.top = (col + jg).toString() + "px";
imgs[j].parentNode.style.left = (w + jg).toString() + "px";
imgs[j].style.height = h.toString() + "px";
w = w + h / imgs[j].height * imgs[j].width + jg;
}
col += h + jg;
}
/*
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; ++ i) {
if (row + imgs[i].width > document.body.clientWidth + 100) {
++ col;
row = 0;
}
imgs[i].parentNode.style.top = (col * 250).toString() + "px";
imgs[i].parentNode.style.left = row.toString() + "px";
row += imgs[i].width + 10;
}
*/
}
window.onresize=display;
//$(window).resize(display);
</script>
</body>
</html>
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 黑神话悟空上品鼠弩手精魄获取方法一览|上品鼠弩手精魄收集攻略
- 中国音乐地图听见世界非物质文化遗产《非遗HQCD》wav
- 中国民乐合奏作品集《华夏之音HQ》头版限量编号[WAV+CUE]
- [电影原声带]黎允文《天将雄师》[FLAC+CUE]
- 曝NS继任机型已进入量产阶段:已花了30亿日元
- 不是Switch2?曝《马里奥惊奇》NS捆绑包即将公开
- 暖心任天堂!网友Switch维修返还时贴纸被完好保留
- 《国语老歌 经典对唱情歌 2CD》[WAV/分轨][1.1GB]
- 《刀郎 翻唱精选华语专辑 披着羊皮的狼 》[WAV+CUE][430MB]
- 《真的田震 中国乐坛红极一时的歌者 精品集》[WAV+CUE][300MB]
- 群星.1995-新滚石九大天王之情歌大全【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·纵夏欢唱【滚石】【WAV+CUE】
- 群星.1993-滚石九大天王十二出好戏·贺岁齐唱【滚石】【WAV+CUE】
- 黑神话悟空上品虫校尉精魄获取方法一览|上品虫校尉精魄收集攻略
- 《指环王:夏尔的传说》推迟至2025年初发行