解决:我得到了@EdnilsonMaia的答案,并对其进行了改编http://codepen.io/anon/pen/QNGroX
我有一个布局,其中有像这样的用户链:
Window
-------------------
O - O - O - O - O |
| |
O - O - O - O - O |
| |
O - O - O |
------------------
O = user
- = chain (icon)
当用户调整窗口大小时,每行的用户数会减少,并且需要重新排列链,从而增加行数并减少每行的用户数。我发现它与排序算法非常相似。
请注意,当重新排列第一行的最后一个用户到第二行的最后一个位置,第二行的第一个用户到第三行的第一个位置时,它必须在更改位置时遵守它们的连接顺序。
我需要的是如何在JS中编写算法代码的方向。到目前为止,我的代码更改了用户的位置,但没有考虑正确的顺序以及链图标。调整回原始大小时,它也不起作用。
这是我的代码,请注意,每一行都是单独的UL:
function log(msg, debug) {
debug = typeof debug !== 'undefined' ? debug : true;
if (debug) {
console.log(msg);
}
}
$(document).ready(function() {
$(window).on('resize', function() {
rearrangeChain(true);
});
function rearrangeChain(debug) {
debug = typeof debug !== 'undefined' ? debug : false;
log('------------------------', debug);
var win = $(window);
// Percentage
// 1170 -------- 100%
// size -------- x
var totalWindowWidth = 1170;
var windowWidth = win.width();
var percentage = (windowWidth * 100) / totalWindowWidth;
log('Window:' + percentage + '%', debug);
log('Window width:' + win.width() + 'px', debug);
var slotSize = 146.25;
var imagesPerLine = Math.floor(windowWidth / slotSize);
log('Images per line: ' + imagesPerLine, debug);
$('ul.users-chain-home').each(function(k) {
//var element = $(this);
var usersNumber = 1;
$(this).find('.user-image').each(function() {
var element = $(this).parent();
//console.log('users number', usersNumber, '>', imagesPerLine);
if (usersNumber > imagesPerLine) {
var nextLine = $('ul.users-chain-home')[k + 1];
console.log('Next line ' + (k + 1), nextLine);
if (typeof nextLine != 'undefined') {
console.log('Next line append', element[0]);
nextLine.appendChild(element[0]);
}
}
usersNumber++;
});
log('Users per line chain ' + k + ': ' + usersNumber, debug);
});
}
rearrangeChain(true);
});
div#wrapper {
display: inline-block
}
ul.users-chain-home {
list-style-type: none;
margin: 0;
padding: 0
}
ul.users-chain-home li {
display: inline;
}
ul.users-chain-home li div.chain-icon {
vertical-align: middle;
display: table-cell;
width: 40px;
height: 96px;
text-align: center;
}
ul.users-chain-home li div.join-chain {
vertical-align: middle;
display: table-cell;
height: 96px;
text-align: center;
}
img.chain-icon-vertical {
margin: 5px 42px 5px 0;
}
img.chain-icon-vertical-left {
margin: 5px 0 5px 38px;
}
<div id="wrapper">
<div>
<ul class="users-chain-home">
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon show-for-large">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li class="show-for-large">
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon show-for-large">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li class="show-for-large">
<img src="img/users/2.jpg" class="user-image">
</li>
</ul>
</div>
<div class="text-right">
<img src="img/assets/chain-icon-vertical.gif" class="chain-icon-vertical">
</div>
<div class="text-right">
<ul class="users-chain-home">
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
</ul>
</div>
<div>
<img src="img/assets/chain-icon-vertical.gif" class="chain-icon-vertical-left">
</div>
<div>
<ul class="users-chain-home">
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/1.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/2.jpg" class="user-image">
</li>
<li class="chain-icon">
<div class="chain-icon">
<img src="img/assets/chain-icon.gif">
</div>
</li>
<li>
<img src="img/users/3.jpg" class="user-image">
</li>
</ul>
</div>
</div>
试试我的解决方案:
1)PHP / HTML
生成html元素。
<div id="content">
<ul class="user-chain">
<?php for($i = 1; $i<=50; $i++): ?>
<li class="user-item">
<div class="user-container">
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png" class="user-avatar">
</div>
</li>
<?php endfor; ?>
</ul>
</div>
2)CSS
注意:我使用FontAwesome来生成图标
.user-chain { margin: 0; padding: 0 }
.user-item { margin: 15px; list-style: none; max-width: 100px; position: absolute; }
.user-container { position: relative }
.user-avatar { max-width: 100px; max-height: 100px; display: block }
.user-container.chain:before {
content: "\f0c1";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
}
.user-container.chain-ltr:before {
top: 50%;
left: -24px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
margin-top: -10px;
}
.user-container.chain-rtl:before {
top: 50%;
right: -32px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
margin-top: -10px;
}
.user-container.chain-ttd:before {
top: -20px;
right: 50%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
margin-right: -12px;
}
3)jQuery的
获取列表的容器宽度,并计算每行的最大项目数。定义一个标志以告知链中下一项的方向。使用变量(i)计算每一项的边距和下一项的方向。计算行数以定义上边距。
$(document).ready(function() {
var w_container = $('#content').width();
var elm_h = 100;
var elm_w = 100;
var elm_m = 15;
var maxNodesInLine = Math.floor(w_container / (elm_w + (elm_m *2)));
var direction = 'ltr';
var line = 0;
var i = 0;
function ltr(elm){
console.log('function ltr');
direction = 'ltr';
if(i == 0){
elm.css({"margin-left":0});
} else{
elm.css({"margin-left":(elm_w+(elm_m*2))*i});
}
elm.css({"margin-top":(elm_h+(elm_m*2))*line});
i++;
}
function rtl(elm){
console.log('function rtl');
if(i == (maxNodesInLine)){
elm.css({"margin-left":elm_m*2});
} else{
elm.css({"margin-left":(elm_w+(elm_m*2))*(maxNodesInLine - (i+1))});
}
elm.css({"margin-top":(elm_h+(elm_m*2))*line});
i++;
}
function ttd(elm){
console.log('function ttd');
elm.css({"margin-top":(elm_h+(elm_m*2))*line});
if(direction == 'ltr'){
direction = 'rtl';
elm.css({"margin-left":(elm_w+(elm_m*2))*(i-1)});
}
else{
direction = 'ltr';
elm.css({"margin-left":0});
}
i=1;
}
$( ".user-item" ).each(function( index ) {
elm = $(this);
if(direction == 'ltr' && i < maxNodesInLine)
{
ltr(elm);
$(elm).not(':first-child').children('.user-container').addClass('chain chain-ltr');
}
else if(i == (maxNodesInLine)){
line++;
ttd(elm);
$(elm).children('.user-container').addClass('chain chain-ttd');
}
else {
rtl(elm);
$(elm).children('.user-container').addClass('chain chain-rtl');
}
});
$(window).on('resize', function() {
console.log('Window re-sized.');
// todo: funtcion to update when resize window...
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句