Task 45: The cask layout of the multi-function album

Task 45: The cask layout of the multi-function album

For the crowd:

Have a certain HTML, CSS, JavaScript base

Difficulty:

Difficult

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

• Practice using HTML, CSS, and JavaScript for local functions
• Prepare for the fourth stage album task
• Combine css,javascript to master the layout of the cask

Task description

• Refer to the following design diagram, using JavaScript, CSS, the implementation of the barrel layout. We sometimes see the layout in some photography sites (such as 500px, Flickr, etc.), where the aspect ratio of each picture is the same as the aspect ratio of the picture itself; the height of each line is not fixed, but as close as possible; the number of pictures per line is different, within a certain range (we stipulate that each line 3-6, except for the last line) to ensure that the row height is as close as possible by controlling whether the picture joins the current line. Here we have a handy name for this layout called "barrel layout", because it is like a barrel, do not care how many pieces of wood you put, and the height of the different circles of wood is consistent, as long as each lap to the same width of the barrel.
• Implementing a library encapsulated as a JavaScript

Task considerations

• Please note that the code style is neat and elegant
• The code contains the necessary comments
• It is reasonable to choose to use other third-party class libraries, but not recommended. Libraries that cannot be directly used in a cask layout

Task Collaboration recommendations

• Team focused discussion, clear the topic requirements, ensure that the team each to the subject of cognitive consensus
• Practice of accomplishing tasks individually
• Cross-review other people's code, suggesting that everyone see at least one team member's code
• Discuss each other and finally synthesize a copy of the best code within the group to submit

Online learning Resources

• CSS Clip-path Maker
• Placehold.it the different size of the image generation tool used to occupy a bit

Task 45: The cask layout of the multi-function album