Jscsshtml completes html after JavaScript and css are added.
:
Code:
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> untitled document </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">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</Div>
</Div>
<Div class = "box">
<Div class = "box-img">
</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 {
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 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/Webpage Design/image/" + 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.doc umentElement. scrollTop | document. body. scrollTop;
Var pageheight?document.doc umentElement. clientHeight | document. body. clientHeight;
If (lastContentHeight <scrollTop + pageHeight ){
Return true;
}
}
// Obtain the number of screen images
Function imgLocation (parent, content ){
// Retrieve all contents of parent (both BOX)
Var cparent = document. getElementById (parent );
Var ccontent = getChildElement (cparent, content );
// Console. log (ccontent); number of boxes
Var imgWidth = ccontent [0]. offsetWidth; // The image width.
Var m1_document.doc umentElement. clientWidth; // valid screen width
Var cols = Math. floor (m/imgWidth); // The Screen width divided by the Image Width
Cparent.style.css Text = "width:" + imgWidth * cols + "px; margin: 0 auto"; // The width of a container row
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"; // 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;
}
}
}
// Storage box
Function getChildElement (parent, content ){
Var contentArr = [];
// Obtain the subset through the parent node
Var allcontent = parent. getElementsByTagName ("*");
// ClassName and "box same", heap
For (var I = 0; I <allcontent. length; I ++ ){
If (allcontent [I]. className = content ){
ContentArr. push (allcontent [I]);
}
}
Return contentArr;
}