My attempt at an image layout challenge

Developer
Christopher Schuck
Size
3,175 Kb
Views
36,432
  1. My attempt at an image layout challenge Previews
  2. My attempt at an image layout challenge HTML Codes
  3. My attempt at an image layout challenge CSS Codes
  4. My attempt at an image layout challenge JS Codes

How do I make an my attempt at an image layout challenge?

The challenge can be seen here: https://techblog.badoo.com/blog/2014/10/09/css-centre-boxes/. So far my solution satisfies all the requirements, except for perhaps #5.. What is a my attempt at an image layout challenge? How do you make a my attempt at an image layout challenge? This script and codes were developed by Christopher Schuck on 22 July 2022, Friday.

My attempt at an image layout challenge Previews
IQ Test

My attempt at an image layout challenge - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My attempt at an image layout challenge</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="flexContainer"><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/><img src="https://farm9.staticflickr.com/8115/8627714059_8cde670b02.jpg"/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

My attempt at an image layout challenge - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0
}
html { height: 100%
}
#flexContainer { display: flex; flex-flow: row wrap; justify-content: center; /*use auto for perfect spacing but an inconsistent right gutter*/ padding: 25px; background: lightblue
}
img { width: 95px; /*14.285714285714285714285714285714%*/ max-width: 100%; height: 95px; /*14.285714285714285714285714285714%*/ background-color: white; text-align: left; padding: 3px;
}
/*
img:last-child { margin-right: 95px
}
@media only screen and (max-width: 1207px){ img:last-child { margin-right: 950px
} @media only screen and (max-width: 1111px) { img:last-child { margin-right: 665px
} @media only screen and (max-width: 1016px) {img:last-child { margin-right: 380px
} @media only screen and (max-width: 921px) { img:last-child { margin-right: 95px
} @media only screen and (max-width: 826px) { img:last-child { margin-right: 475px
} @media only screen and (max-width: 731px) { img:last-child { margin-right: 95px
}
} @media only screen and (max-width: 636px) and (min-width: 541px) { img:last-child { margin-right: 185px
}
}*/

My attempt at an image layout challenge - Script Codes JS Codes

//Libraries are jQuery and Underscore
//console.log("div width: " + divWidth)
//var remainder = imageMaximumSpace % divWidth;
//console.log(remainder);
//var remainder2 = remainder % imageWidth;
//console.log(remainder2)
/*var images = $('img');
var totals = 0;
var gutter = 95;
var pad = 3;
var marg = 25;
var topRowNum = 11;
var images2 = images.slice(0, images.length-topRowNum);
var images3 = images.slice(12, images.length);
var addUp = 0;
var addUp2 = 0;
for (var i = 0, len = images2.length; i < len; i++) { var getFirstRow = parseFloat($(images2[i]).css("width")); addUp += getFirstRow
}
for (var i = 0, len = images3.length; i < len; i++) { var getSecondRow = parseFloat($(images3[i]).css("width")); addUp2 += getFirstRow
}
$("img:last-child").css({marginRight: '95px'});*/
/*$(window).resize(function() { var totals = bodyWidth - (addUp + pad + marg);
var totals2 = bodyWidth - (addUp2 + pad + marg); var overall = totals2; if (overall <= totals2) { $("img:last-child").css({marginRight: '95px'}) console.log($(window).width()) }
}).resize();*/
/*$(window).resize(function() { var bodyWidth = $('body').width(); var totals2 = bodyWidth - (addUp2 + pad + marg); console.log(totals2);
}).resize();*/
$(window).resize(_.debounce(function(){ var divWidth = $('#flexContainer').innerWidth(); var maxImages = Math.floor(divWidth / $('img').outerWidth()) - 1; console.log(maxImages); var maxSpace = divWidth - (maxImages * $('img').outerWidth()); console.log('the max space: ' + maxSpace); var maxImageNum = Math.floor(divWidth / $('img').outerWidth() - 1); var imageWidth = $('img').length * $('img').outerWidth(); var maxImageRowSpace = maxImages * $('img').outerWidth(); console.log('max space for images in a row: ' + maxImageRowSpace); var gutter = divWidth - maxImageRowSpace; console.log('the current gutter: ' + gutter); /*var extraSpace = (divWidth - gutter * $('img').outerWidth()) - parseInt($('#flexContainer').css('padding')) - parseInt($('img').css('padding')); console.log('The extra space: ' + extraSpace); var rowBreak = divWidth - extraSpace;*/ /*console.log((divWidth) % (imageWidth + parseInt($('#flexContainer').css('padding')) + parseInt($('img').css('padding'))));*/ //console.log(imageWidth); if (imageWidth < divWidth) { var x = (divWidth - maxSpace) - imageWidth; //console.log(x); $("img:last-child").css({marginRight: x + 'px'}) } else { x = (imageWidth % (divWidth - maxSpace)); x = (divWidth - x - maxSpace); //console.log(x); $("img:last-child").css({marginRight: x + 'px'}) }
},500));
My attempt at an image layout challenge - Script Codes
My attempt at an image layout challenge - Script Codes
Home Page Home
Developer Christopher Schuck
Username mofny
Uploaded July 22, 2022
Rating 3
Size 3,175 Kb
Views 36,432
Do you need developer help for My attempt at an image layout challenge?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christopher Schuck (mofny) Script Codes
Name
Helpful Web Dev Links
A quick and easy search autocomplete
Font Awesome icons as cursors
The power of Flex
Smooth transition of CSS order property
Demo site for Udacity
An interesting topic
Image layout with the power of flex
A very simple tooltip with options
Flex Image Slider 2.0
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!