Nine-grid algorithm core:
- Use the control index to calculate the number of rows and columns where the control is located;
- Use controls to calculate the left distance;
- Use controls to calculate the top distance;
- Positioning is required when writing special effects
formula:
row=parseInt(i/cols);
column col=parseInt(i%cols);
i is the current box, cols is the total number of columns,
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nine-Gate</title>
<style>
*{
padding: 0;
margin: 0;
}
#top{
margin-top:30px;
margin-bottom: 20px;
margin-left:20px;
}
#bottom{
position: relative;
}
#bottom .content{
width: 220px;
height: 360px;
background-color: skyblue;
margin: 0 0 15px 15px;
padding: 5px;
}
.content img{
width: 220px;
height: 308px;
}
#bottom .content p:last-child{
font-size: 15px;
color: red;
}
</style>
</head>
<body>
<div >
<button>Arrange in three rows</button>
<button>Arrange in four rows</button>
<button>Arranged in five rows</button>
</div>
<div >
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
<div class="content">
<img src="./images/">
<p>It is a very successful directorial debut</p>
<p>Almost fully launched new actors</p>
</div>
</div>
<script>
=function(){
var top=("top");
var btns=("button");
var content=("bottom");
// ();
//(btns);
//Define the width and height of the variable identify the box var cssW=220;
var cssH=360;
var marginXY=15;
// Listen to button click event btns[0].onclick=function(){
getContent(3);
}
btns[1].onclick=function(){
getContent(4)
}
btns[2].onclick=function(){
getContent(5);
}
function getContent(cols){
var cols;
//Travel for(var i=0;i<;i++){
var currentCont=[i];
//(currentCont);
//The row where the box is located var row=parseInt(i/cols);
//The column where the box is located var col=parseInt(i%cols);
//("Box in the second" +row+ "row,"" in the second" +col+ "column"); ="absolute";
=col*(cssW+marginXY)+"px";
=row*(cssH+marginXY)+"px";
}
}
}
</script>
</body>
</html>
Nine-grid (implemented with native js)
1. The nine-part grid in this article is implemented using native js;
2. The effect of the nine-grid is: any square of 1-9 can be exchanged, and drag the square to the outside of the large box and then automatically return to the position before dragging.
3. The code is as follows:
html code:
<ul > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>
css code:
body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,th,tr,td,hr,caption,table,form,img,input,legend,fieldset{
margin:0;
padding:0;
}
html {
overflow: hidden;
}
ul {
list-style: none;
}
#box {
position: relative;
margin: 20px auto;
width: 640px;
height: 640px;
border: 1px solid #eee;
}
#box li {
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 40px;
font-weight: bold;
background: #eee;
}
#box .active {
z-index: 1;
color: #fff;
background: blue;
}
js code:
= function () {
var oBox = ('box');
var aLi = ;
for(var i = 0; i < ; i++) {
// Layout aLi[i]. = 210 * (i % 3) + 10 + 'px';
aLi[i]. = 210 * (i / 3) + 10 + 'px';
// Add drag and drop function aLi[i].index = i;
aLi[i].onmousedown = function (ev) {
var e = ev || ;
var iX = - ;
var iY = - ;
if() {
();
}
var oThat = this;
// Add class name = 'active';
= function (ev) {
var e = ev || ;
var iL = - iX;
var iT = - iY;
= iL + 'px';
= iT + 'px';
// Conditions for switching positions for(var j = 0; j < ; j++) {
if(oThat != aLi[j]
&& + > aLi[j].offsetLeft + aLi[j].offsetWidth / 2
&& + > aLi[j].offsetTop + aLi[j].offsetHeight / 2
&& < aLi[j].offsetLeft + aLi[j].offsetWidth / 2
&& < aLi[j].offsetTop + aLi[j].offsetHeight / 2) {
var iCurIndex = ;
// Switch location aLi[j]. = 210 * (iCurIndex % 3) + 10 + 'px';
aLi[j]. = 210 * (iCurIndex / 3) + 10 + 'px';
// Exchange subscript = aLi[j].index;
aLi[j].index = iCurIndex;
break;
}
}
};
= function () {
= null;
= null;
if() {
();
}
// Remove the class name = '';
// Reset the current drag element position = 210 * ( % 3) + 10 + 'px';
= 210 * ( / 3) + 10 + 'px';
};
return false;
};
}
};
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.