JavaScript Web making tips: Picture List adaptive width display

Article Introduction: engaged in web refactoring for several years, JavaScript ability has been compared to vegetables, mainly or too little. In order to improve this ability, this period of time to take the initiative to undertake some of this work, really feel the learning and accumulation of the difficult, but often accompanied by a number of problems after the small accomplishment of the feeling and let people enjoy.

Engaged in web refactoring for several years, JavaScript ability has been compared to vegetables, mainly or too little. In order to improve this ability, this period of time to take the initiative to undertake some of this work, really feel the learning and accumulation of the difficult, but often accompanied by a number of problems after the small accomplishment of the feeling and let people enjoy.

In a recent project, encountered a picture list adaptive width display problem, the demand itself is not difficult, by this and is a sort of carding and summed up the solution at that time, but also expect to have to do this kind of demand and know how to start the students to bring a little inspiration. Implementation of the method should be a lot, if you have better, to share Oh ~ ~

The requirement is this, in an adaptive width column (Figure 1):

1, the width of the column can be changed by the user's operation, such as drag and drop to change the size of the window;
2, when the width changes, the need for a picture list can always be displayed in the column in good condition: there is a certain amount of space between the pictures, and will not appear half a picture.
3, if the current width does not fully display all the pictures, you can click on the left and right side of the arrow to scroll the display. As shown in Figure 2:

After analysis, we can decompose the requirements into: the width of the column adaptive, the image list adaptive display, the list of the left and right scrolling. Column width adaptive, you can directly use the style to solve the width of the acquisition is also simple, no longer said. The scroll of the picture is also good to say, nothing more than to change the list by the style of the left and right position to achieve. The tricky part is, how do you get a picture list to fit in a range of areas with varying widths?

Compared to Figure 1, Figure 2, we found that the changes are: column width, picture display number, the spacing between pictures. Width adaptive good To do, the number of pictures and spacing it? Well, that's the core issue we need to address.

1, about the visual area

Look at Figure 2, there are only 3 images in the column, we know because the other parts are hidden by the style, and the whole picture list is actually a whole. Just like the mask in Flash, what we have to do is to control a part of the picture list to display to the user according to the user's wishes. For the sake of the back, we call this part of the list area that the user can see as the viewable area of the list. It is characterized by changes in the width of the current column, as shown in Figure 3:

The picture list is dead, the column width is changing, how lets the picture list adapt the column width the change to display in the visible area in good condition? Well, you've come to think of it. The answer is to change the spacing between the pictures to achieve. As shown in Figure 4:

Then we can draw the following:
the width of the viewable area = The sum of the picture widths that can be displayed within the viewable region (hereinafter called the number of visible pictures ) + picture spacing sum

2. Calculate the number of visual images

The key thing is to show the picture, and we'll start by counting the number of visual images. The width of the viewable area can be easily obtained, and the width of all the pictures is also uniform size (what?) Not unified? Fortunately, our product manager is not yet BT to this point ^^~ here or the first to talk about the fixed situation, the situation is not fixed next time to explore. Ignoring the spacing of the pictures first, the problem can be simplified to:

number of visual pictures = viewable area width/unit picture width

Code (the HTML code involved in the code, see demo below):

Gets the width of the current viewable range
var plstwrpwth = $ (". Jq_ptlst"). width ();			
Get the Unit picture width (the picture may include a border style, etc., take the width of the element Li in the list to avoid error)
var vallstliwth = $ (". Jq_ptlst li"). width ();			
Calculates the current number of visible pictures (viewable area width/unit picture width again)
valimglth = Math.floor (plstwrpwth/vallstliwth);

3. Calculate the spacing between pictures

How do you calculate the spacing? As we can see from Figure 4, the width of all the visible pictures is left with the sum of the spacing. So:
Sum of spacing = visual area width – Unit picture width * Number of pictures visible

So we can calculate the spacing of the pictures:
Picture spacing = sum of space (excluding the visible area width of the visual picture width)/spacing (that is, the number of visual pictures +1, why +1?) Look at Figure 4)
Code:

Rounding up to avoid decimal errors)
VALPLSTMG = Math.ceil (Plstwrpwth-valimglth * vallstliwth)
			/
			(valimglth +
			1));

Here, you will find that the final problem to be solved is to calculate the spacing of the pictures. With the spacing, we have been able to do according to the column width, good display of the visual area of the picture. As to how many graphs can be displayed, we are not concerned at this time.

4, need to pay attention to the situation

When the sum of the above calculated spacing is small, or simply 0 ... As shown in Figure 5:

It's obviously not good to be together like a ~–. At this point, we can set a minimum spacing to solve this problem. When the calculated spacing is less than this spacing, 1 visual images are reduced, and the width originally belonging to the picture is assigned to the rest of the picture as spacing. Code:

var plstlesmg =
			5;			Set minimum spacing, i.e. critical spacing
if (VALPLSTMG < PLSTLESMG) {
	valimglth = valimglth-
			1;	When the spacing is less than the critical spacing, the number of visible images-1
	fnplstmg ();		   	Recalculate the space between the number of visual pictures-1
;

There is also a situation, as shown in Figure 6:

The total number of pictures is the number of visual pictures when the number of visual pictures is greater than the total number of pictures in the list (and equal to the case). Code:

var plstimglth = $ (". Jq_ptlst"). FIND ("img"). Length;	Get the total number of pictures
if (valimglth >= plstimglth) {
	valimglth = plstimglth;	 The total number of pictures is the number of visual images
	fnplstmg ();		 Recalculate the spacing
	$ (". Jq_plstrort") with the number of new visual pictures. Hide ()//Hidden right scroll arrow (default left arrow hidden when initializing, right arrow to display)
};

Here, basically the picture List adaptive width display is resolved, then the Picture list scrolling problem.

5, List scrolling

Experienced students may think about it, the crux of the problem is how to determine whether the current scrolling is the last picture (ah?) Do you mean to do cyclic scrolling? Roll to the last one. Seamless stitching the first picture, so forever rolling down? In fact, I just want to say that your product manager is really good ~ Well, look at everyone is not easy, let's discuss this situation.

So how do you know to roll to the last picture? I think the way is through the width of the calculation, namely:
When the total scrolled width equals the width of the non-visual region (that is, the sum of the widths on both sides of the viewable area), you cannot scroll to the right again. As shown in Figure 7:

Code:

var ptlstcurmg = parseint (Plstrowrp.css ("Margin-left"));
			Get current scrolling width
//when scrolled width = invisible area width, that is, scroll to last figure
var ptlstrowth =
			(plstimglth-valimglth)
			*
			(PTLSTIMGMG + VALLSTLIWTH);	
if (ptlstcurmg + ptlstrowth = =
			0) {
	$this. Hide ();	Hide right Arrow
};

The above is the right roll of the case, roll to the left is simple. When scrolling width is 0 o'clock, scrolling to the left is the head.

When scrolling width = 0 is scrolled to the first figure
if (PTLSTCURMG =
			0) {
	$this. Hide ();	Hide left Arrow
};

6. Binding method

The list of pictures scrolling is finished, and the next step is to implement these methods. In order to adapt the user to change the window size in time, we need to bind the adaptive function to the resize method to execute, the code:

The $ (window) is executed once the window size changes
. Resize (function () {
	fnautowth ();	Adaptive Method
});

Wordy so much, in fact, mainly around two questions:
A. Controlling the display of the list by calculating the spacing of the pictures
B. Scroll to the bottom of the solution by width calculation

ok~ Click here is demo ... (After using the browser to open, by changing the window size, experience the image List Adaptive effect.) ）

Small Thinking (not see demo students can not think Oh ~): The demo with the browser open, drag the window to the minimum width, that is, the current column width is less than the width of the picture (small do not move?) Try it with chrome, the list doesn't see the picture, why? How to solve it?

The whole process is actually quite simple, do not know whether I have not made it clear, have you heard? If you are not clear about the place you are interested in, you can leave a message Oh ~ Pro. However, if you are a sophisticated to fix the spirit of the strong, but also hope to point out the wrong place ah, thank you ~ ~ can still linger in the construction of the base period ~ Lu Ying ... learn JS said for many years, think about those years ... So, friend, if you are also a Web page refactoring, don't just write Div, have the time to learn to write JS Bar, very interesting it ~

In other words, the development of the Internet has been changing rapidly, all kinds of new technology layer is not poor, need to learn something really much ... Come on!
all kinds of learning pressure AH ~ or, relax a bit first? All right ...