一个js加css加html完成的HTML
效果图：
代码：
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="Untitled-2.css">
<script src="Untitled-3.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box-img">
<img src="图片/IMG_20160718_161944.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-1b00715b51c94795859ccb8d2aa82395.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-0ce66d19d9883db7d699a5e8b5594446.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-4a42fa1757318547c9bae32e818e867d.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-aa6d8970538b5422f640522ec93d113b.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-89ea89c2f255b8a885058c1bd3053369.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/IMG_20160718_161944.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-1b00715b51c94795859ccb8d2aa82395.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-0ce66d19d9883db7d699a5e8b5594446.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-4a42fa1757318547c9bae32e818e867d.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-aa6d8970538b5422f640522ec93d113b.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-89ea89c2f255b8a885058c1bd3053369.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-9d13cdcd0196ad5b85125f47400f8bda.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-905cd98f5759d2cee3dd2ddf30070f66.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/IMG_20160718_161944.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-1b00715b51c94795859ccb8d2aa82395.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-0ce66d19d9883db7d699a5e8b5594446.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-4a42fa1757318547c9bae32e818e867d.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-aa6d8970538b5422f640522ec93d113b.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-89ea89c2f255b8a885058c1bd3053369.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-9d13cdcd0196ad5b85125f47400f8bda.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-4a42fa1757318547c9bae32e818e867d.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-aa6d8970538b5422f640522ec93d113b.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-905cd98f5759d2cee3dd2ddf30070f66.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/IMG_20160718_161944.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-1b00715b51c94795859ccb8d2aa82395.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-0ce66d19d9883db7d699a5e8b5594446.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-4a42fa1757318547c9bae32e818e867d.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-aa6d8970538b5422f640522ec93d113b.jpg">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-89ea89c2f255b8a885058c1bd3053369.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-9d13cdcd0196ad5b85125f47400f8bda.jpg" />
</div>
</div>
<div class="box">
<div class="box-img">
<img src="图片/img-905cd98f5759d2cee3dd2ddf30070f66.jpg" />
</div>
</div>
</div>
</body>
</html>
css:
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
}
#container{
position:relative;
}
.box{
padding:5px;
float:left;
}
.box-img{
padding:5px;
boder:1px solid #cccccc;
box-shadow:0 0 5px #ccc;
boder-radius:5px;
}
.box-img img{
width:150px;
height:auto;
}
js:
// JavaScript Document
window.onload=function(){
imgLocation("container","box");
var imgData={"data":[{"src":"img-703fa08f5cbcc824355f275d07e1d2a6.jpg"},{"src":"img-703fa08f5cbcc824355f275d07e1d2a6.jpg"},{"src":"img-703fa08f5cbcc824355f275d07e1d2a6.jpg"},{"src":"img-703fa08f5cbcc824355f275d07e1d2a6.jpg"},{"src":"IMG_20160718_161944.jpg"}]};
window.onscroll=function(){
if(checkFlag()){
var cparent=document.getElementById("container");
for(var i=0;i<imgData.data.length;i++){
var ccontent=document.createElement("div");
ccontent.className="box";
cparent.appendChild(ccontent);
var boximg=document.createElement("div");
boximg.className="box-img";
ccontent.appendChild("boximg");
var img=document.createElement("img");
img.src="file:///C|/Users/lenovo/Desktop/网页设计/图片/"+imgDate.date[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("container");
var ccontent=getChildElement(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
if(lastContentHeight<scrollTop+pageHeight){
return true;
}
}
//获得屏幕图片数量
function imgLocation(parent,content){
//父级parent的内容全部取出（既取BOX）
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,content);
//console.log(ccontent);盒子个数
var imgWidth=ccontent[0].offsetWidth;//图片的宽度
var m=document.documentElement.clientWidth;//屏幕的有效宽度
var cols=Math.floor(m/imgWidth);//屏幕宽度除以图片宽度
cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";//container一行的宽度
var BoxHeightArr=[];
for(var i=0;i<ccontent.length;i++){
if(i<cols){
BoxHeightArr[i]=ccontent[i].offsetHeight;
}else{
var minheight=Math.min.apply(null,BoxHeightArr);
var minIndex=getminheightLocation(BoxHeightArr,minheight);
ccontent[i].style.position="absolute";//绝对
ccontent[i].style.top=minheight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight;
}
}
}
//
function getminheightLocation(BoxHeightArr,minHeight){
for(var i in BoxHeightArr){
if(BoxHeightArr[i]==minHeight){
return i;
}
}
}
//存储box
function getChildElement(parent,content){
var contentArr=[];
//通过父得到子集
var allcontent=parent.getElementsByTagName("*");
//className与“box相同”，堆加
for(var i=0;i<allcontent.length;i++){
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
一个js加css加html完成的HTML的更多相关文章
- JS和CSS加载（渲染）机制不同
一.结论 CSS可以在页面加载完成后随时渲染.举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效. JS不可以在页面加载完成后生效.最明显的 ...
- 一个js文件如何加载另外一个js文件
方法一,在调用文件的顶部加入下例代码: document.write(”<script language=javascript src=’/js/import.js’></scrip ...
- 经验总结：按需加载JS和css
项目中做过这样的事情:所有页面都通过SSI指令 include这样一份public-js.shtml, 用来引入涉及到的js(包括公共的脚本 验证插件 自定义组件等),但是一些没有交互效果的页面根本不 ...
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?
HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...
- 常用js，css文件统一加载方法，并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- 动态加载、移除、替换JS和CSS
//动态加载一个js/css文件 function loadjscssfile(filename, filetype) { if (filetype == "js") { var ...
- ASP.NET MVC 5 默认模板的JS和CSS 是怎么加载的?
当创建一个默认的mvc模板后,项目如下: 运行项目后,鼠标右键查看源码,在源码里看到头部和尾部都有js和css文件被引用,他们是怎么被添加进来的呢? 首先我们先看对应的view文件index.csht ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
随机推荐
- 2D游戏编程5—锁定频率
核心利用win心跳函数GetTickCount利用差量锁定fps,如下代码锁定30fps,缺点为如果计算机不能以30fps运行,程序将低于30fps #define WIN32_LEAN_AND_ME ...
- 【转】shell 教程——03 Shell脚本语言与编译型语言的差异
大体上,可以将程序设计语言可以分为两类:编译型语言和解释型语言. 编译型语言 很多传统的程序设计语言,例如Fortran.Ada.Pascal.C.C++和Java,都是编译型语言.这类语言需要预先将 ...
- In Java, what is the default location for newly created files?
If the current directory of the application. If e.g. you create a File by using new FileOutputStream ...
- iOS中SQLite知识点总结1
数据库(SQLite) 01-数据库简介 1.什么是数据库 数据库(Database)是按照数据结构来组织,存储和管理数据的仓库 2.数据库的分类 关系型数据库(主流) PC端:Oracle/MySQ ...
- Java中的三目运算符 详解
对于有些选择分支结构,可以使用简单的条件运算符来代替. 如: if(a<b) min=a;else min=b; 可以用下面的条件运算符来处理 min=(a<b)?a:b; 其 ...
- Jsp中的EL表达式
EL表达式作用: 向浏览器输出域对象中的变量值或表达式计算的结果!!! 语法: ${变量或表达式} 可以通过page指令来设置EL表示是否启用,false是不启用,true是启用,默认是true &l ...
- 关于T-SQL重编译那点事，WITH RECOMPILE和OPTION(RECOMPILE)区别仅仅是存储过程级重编译和SQL语句级重编译吗
本文出处:http://www.cnblogs.com/wy123/p/6262800.html 在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的 ...
- 在XMPP的JAVA开源实现Openfire中，增加LBS 附近的人功能
1. XMPP协议 与 Openfire XMPP协议是IM领域的标准协议了,具体可参考 http://xmpp.org 及RFC6120,RFC6121,RFC6122等相关文档. http: ...
- [转]flume-ng+Kafka+Storm+HDFS 实时系统搭建
http://blog.csdn.net/weijonathan/article/details/18301321 一直以来都想接触Storm实时计算这块的东西,最近在群里看到上海一哥们罗宝写的Flu ...
- eclipse 配置Maven问题解决办法：新建maven工程时报错：Could not resolve archetype org.apache.maven.archetypes .
此文乃本作者配置maven,被其折磨n天,究极解决方案,好文要顶啊.欢迎致电: zhe-jiang.he@hp.com 首先各maven.archetypes下载地址: http://mirrors. ...