


js method to implement complex sorting after zooming in and out of images_jquery
May 16, 2016 pm 05:48 PMThis is a picture effect based on jquery. Its function is: when the picture becomes larger (smaller) when clicked, other pictures will be sorted and moved according to certain rules.
First of all, let’s take a look at the final rendering:
Some people may think after seeing this, why is this so difficult? Isn’t it too simple? Did Xiaoti make a big deal? Only when you actually try it will you know what the difficulty is.
First of all, let’s talk about the requirements:
1. Pictures are divided into big and small pictures. The big picture occupies the position of four small pictures.
2. Click on the picture to zoom in and out and rearrange the order. ,
3. When you click on the even column (2,4), the item in front of it will be lifted up and arranged behind it
4. The first item cannot be moved, and the second item will occupy the third place if you click on it. For the position of four, take the first small one from the back and place it in the second position.
The demand is like this. Is it more difficult now? My idea is to implement it step by step according to this demand. The code is as follows:
var elemArr = $("#old").find("li").get();
var arrCol=[0,0,0,0];
var defaultSize = 211;
function setPosition(elemArr,content,oldContent){
//alert(elemArr.length)
if (elemArr.length==0){
$(oldContent).remove();
animate(content.find("li"));
var max = Math.max(arrCol[0],arrCol[1],arrCol[2],arrCol[3])
$(content).parent().height(max);
$(content).height(max);
return;
}
var item= $(elemArr.shift());
if (item.hasClass("big")){
//大
var min =computeMin(content);
var x = min.x;
var y =min.y;
if (x==defaultSize){
var tmp = $("li[x='0'][y='" y "']",content);
if (tmp.hasClass("static")){
//第一个
/*
arrCol[1]=0;
x=2*defaultSize;
if ($("li[x='" x "'][y='" y "']",content).size()>0){
y=parseInt($("li[x='" x "'][y='" y "']",content).attr("y")) 2*defaultSize;
}
arrCol[1]=0;
*/
elemArr=insertSmallArr(elemArr,item);
setPosition(elemArr,content,oldContent);
return;
}else{
elemArr=$("li[x='0'][y='" y "']",content).get().concat(elemArr);
//$("li[x='0'][y='" y "']",content).remove();
x-=defaultSize;
arrCol[0]-=defaultSize;
}
}
if (x==defaultSize*3){
elemArr=$("li[x='" defaultSize*2 "'][y='" y "']",content).get().concat(elemArr);
//$("li[x='200'][y='" y "']",content).remove();
x-=defaultSize;
arrCol[2]-=defaultSize;
}
item.attr({"top":y,"left":x}).attr({"x":x,"y":y});
if (x==0){
arrCol[0] =defaultSize*2;
arrCol[1] =defaultSize*2;
}
if (x ==defaultSize*2){
arrCol[2] =defaultSize*2;
arrCol[3] =defaultSize*2;
}
}else{
//小
var min =computeMin(content);
var x = min.x;
var y =min.y;
item.attr({"top":y,"left":x}).attr({"x":x,"y":y});
if (x==0){
arrCol[0] =defaultSize;
}
if (x ==defaultSize){
arrCol[1] =defaultSize;
}
if (x ==defaultSize*2){
arrCol[2] =defaultSize;
}
if (x ==defaultSize*3){
arrCol[3] =defaultSize;
}
}
$(content).append(item)
setPosition(elemArr,content,oldContent);
}
setPosition(elemArr,$("#news"),$("#old"));
function insertSmallArr(arr,item){
arr = item.get().concat(arr);
var tmpArr =[];
var first =null;
for (var i=arr.length-1;i>=0 ;i-- ){
if (!$(arr[i]).hasClass("big")){
first=arr[i];
break;
}
}
if (first){
tmpArr.push(first);
}
for (var i=0,l=arr.length;i<l ;i ){
if (first !== arr[i]){
tmpArr.push(arr[i]);
}
}
return tmpArr;
}
function computeMin(content){
var arr = $(content).find("li");
var miny = Math.min(arrCol[0],arrCol[1],arrCol[2],arrCol[3])
var minx= 0;
if (miny==arrCol[3]){
minx=defaultSize*3;
}
if (miny==arrCol[2]){
minx=defaultSize*2;
}
if (miny==arrCol[1]){
minx=defaultSize;
}
if (miny==arrCol[0]){
minx=0;
}
return {x:minx,y:miny};
}
$("#main_content").delegate("li","click",function(){
if ($(this).index()==0){
return false;
}
if (!$(this).hasClass("big")){
$(this).attr({"h":417,"w":417})
}else{
$(this).attr({"h":206,"w":206})
}
$(this).toggleClass("big");
$(this).parent().hide();
var c =$(this).parent().children();
c.attr({"x":0,"y":0});
arrCol=[0,0,0,0];
var tmpArr = c.get();
var content = $('<ul></ul>');
$("#main_content").append(content);
setPosition(tmpArr,content,$(this).parent());
})
$("#addNews").click(function(){
var parent = $(this).closest("ul");
$(this).parent().after("<li>news</li>");
var c = parent.children();
var tmpArr = c.get();
var content = $('<ul></ul>');
$("#main_content").append(content);
parent.hide();
arrCol=[0,0,0,0];
setPosition(tmpArr,content, parent);
});
function animate(arr){
$(arr).each(function(){
$(this).animate({
"top":parseInt($(this).attr("top")),
"left":parseInt($(this).attr("left")),
"width":parseInt($(this).attr("w")),
"height":parseInt($(this).attr("h"))
})
});
}

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to solve the problem of automatically saving pictures when publishing on Xiaohongshu? Where is the automatically saved image when posting?

How to post pictures in TikTok comments? Where is the entrance to the pictures in the comment area?

6 Ways to Make Pictures Sharper on iPhone

How to make ppt pictures appear one by one

How to convert pdf documents into jpg images with Foxit PDF Reader - How to convert pdf documents into jpg images with Foxit PDF Reader

How to use JavaScript to implement the drag and zoom function of images?

How to use HTML, CSS and jQuery to implement advanced functions of image merging and display

How to arrange two pictures side by side in wps document
