HTML, CSS and jQuery: Build a beautiful picture wall

HTML, CSS and jQuery: Build a beautiful picture wall

In web design, it is often necessary to use pictures to increase the attractiveness and beauty of the page. As a common layout method, the picture wall can display multiple pictures on the web page in an orderly or disorderly manner, giving people a neat and unified feeling. This article will use sample code to introduce how to use HTML, CSS and jQuery to build a beautiful picture wall.

First of all, you need to prepare some pictures as display materials. You can select a group of related images, or search for them yourself based on your specific needs. Make sure each image is the same size and proportions so that it appears neatly on your picture wall.

Next, we start writing HTML code. First create a <div> element and set a unique ID for subsequent CSS and jQuery operations. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div id=&quot;image-wall&quot;&gt;&lt;/div&gt;</pre><div class="contentsignin">Copy after login</div></div><p>Then, in the JavaScript area, we use jQuery to dynamically add images to this <code><div> element. By looping through the image array, each image is inserted into the #image-wall as an <img alt="HTML, CSS and jQuery: Build a beautiful picture wall" > element.

var imageArray = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg'];

$.each(imageArray, function(index, value) {
  $('<img  alt="HTML, CSS and jQuery: Build a beautiful picture wall" >').attr('src', value).appendTo('#image-wall');
});

Next, we can use CSS to beautify this picture wall. Define the layout and appearance of the image wall by styling #image-wall and internal image elements.

#image-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#image-wall img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
}

In the above example, we used CSS's flex layout to enable the picture wall to be arranged adaptively when space is limited. By setting the width, height and object-fit attributes of the img element, you can keep the proportion of each image unchanged, and use margin-bottom for each image Add some spacing between images.

Finally, we can add some mouse interaction effects to the picture wall to increase the user experience. Take the effect of enlarging a picture as an example. In the jQuery code area, we can add the following code:

$('#image-wall img').hover(function() {
  $(this).css('transform', 'scale(1.2)');
}, function() {
  $(this).css('transform', 'scale(1)');
});

In the above code, by using the hover method, when the mouse hovers over the picture, it will be enlarged by 1.2 times. Restores the image to its original size when the mouse is no longer hovering over it.

Through the above steps, we successfully built a beautiful picture wall. You can further customize your image wall by adding more CSS styles and jQuery effects.

To sum up, it is not complicated to build a beautiful picture wall using HTML, CSS and jQuery. Through reasonable layout settings and some simple interactive effects, you can make your web page more vivid and rich. I hope the sample code in this article can help you build your own picture wall.

The above is the detailed content of HTML, CSS and jQuery: Build a beautiful picture wall. For more information, please follow other related articles on the PHP Chinese website!