0
<div id="data">
<div class="qa">
<div class="question">
Question 1
</div>
<div class="answer">
Answer 1
</div>
</div>
<div class="qa">
<div class="question">
Question 2
</div>
<div class="answer">
Answer 2
</div>
</div>
<div class="qa">
<div class="question">
Question 3
</div>
<div class="answer">
Answer 3
</div>
</div>
<div class="qa">
<div class="question">
Question 4
</div>
<div class="answer">
Answer 4
</div>
</div>
<div class="qa">
<div class="question">
Question 5
</div>
<div class="answer">
Answer 5
</div>
</div>
<div class="qa">
<div class="question">
Question 6
</div>
<div class="answer">
Answer 6
</div>
</div>
<div class="qa">
<div class="question">
Question 7
</div>
<div class="answer">
Answer 7
</div>
</div>
<div class="qa">
<div class="question">
Question 8
</div>
<div class="answer">
Answer 8
</div>
</div>
<div class="qa">
<div class="question">
Question 9
</div>
<div class="answer">
Answer 9
</div>
</div>
</div>
上記は、特定のウィンドウ幅を超えるときに3列にしたいものを示す基本的なHTMLです。しかし、ユーザーがウィンドウのサイズを変更すると、2列に移動する列が必要になります。したがって、テーブルの最初のバリエーションでは、次のようになります。リオーダーウィンドウ上のDIV内の項目リサイズ
質問1：回答1 |質問4：回答4 |質問7：回答7
質問2：回答2 |質問5：回答5 |質問8：回答8
質問3：回答3 |質問6：回答6 |質問9：回答9
小さな画面では、グリッドは次のように並べ替えます。
質問1：回答1 |質問6：回答6
質問2：回答2 |質問7：回答7
質問3：回答3 |質問8：回答8
質問4：回答4 |質問9：回答9
質問5：回答5 |
データが行ではなく列である必要があることに注意してください。私はブートストラップからカスタムJavaScriptにすべてを使用しようとしていますが、私はまだこれを動作させることはできません。データはもともとC＃で構築されており、クライアントサイドで作業し、ブラウザとの親和性が必要です。以下は、私が仕事に取り掛かろうとしているコードであり、仕事の種類ですが、私は立ち往生しています。より良い方法がありますか？私は確信している。
http://jsfiddle.net/MKL4g/624/
if (typeof jQuery === 'undefined') {
throw new Error('Resizable Columns requires jQuery.');
}
+ function($) {
var version = $.fn.jquery.split(' ')[0].split('.');
if ((version[0] < 2 && version[1] < 9) ||
(version[0] === 1 && version[1] === 9 && version[2] < 1) || (version[0] > 3)) {
throw new Error('Resizable Columns requires jQuery version 1.9.1 or higher, but lower than version 4.');
}
}(jQuery);
function ResizeColumns(data, width, numCols) {
this.data = data;
this.width = width;
this.noCols = numCols;
this.resize = function() {
if (width < 768) {
this.noCols = 2;
}
if (data === undefined || data === null) {
throw new Error('data is empty!');
}
if (this.data === undefined || this.data === null) {
throw new Error('this.data is empty!');
}
logMessages('before max');
var max = Math.ceil(this.data.length/this.noCols);
var colArray = [];
var msgs = '';
msgs += 'data.length = ' + this.data.length;
msgs += '<br />max = ' + max;
msgs += '<br />width = ' + this.width;
msgs += '<br />noCols = ' + this.noCols;
logMessages(msgs, false);
colArray = chunkArrayInGroups(data, max);
msgs += '<br />colArray.length = ' + colArray.length;
for (var i = 0; i < colArray.length; i++) {
if (i === 0) {
$('#data').after('<div class="section" id="section' + i + '"></div>')
} else {
var tmp = i - 1;
$('#section' + tmp).after('<div class="section" id="section' + i + '"></div>')
}
var colData = colArray[i];
for (var j = 0; j < colData.length; j++) {
$('#section' + i).append(colData[j])
}
}
};
function chunkArrayInGroups(array, unit) {
var results = [],
length = Math.ceil(array.length/unit);
for (var i = 0; i < length; i++) {
results.push(array.slice(i * unit, (i + 1) * unit));
}
return results;
};
};
function logMessages(msg, useConsole) {
if (useConsole) {
window.console && console.log(msg);
} else {
$('#msgs').html(msg);
}
}
//$(document).ready(function() {
// GetData();
// var data = $("body").data("data");
// var rc = new ResizeColumns(data, $(window).width(), 3);
// rc.resize();
//});
function GetData() {
var data = $("body").data("data");
if (data === null || data === undefined) {
data = $('#data').find('.qa');
if (data !== null && data !== undefined) {
$("body").data("data", data);
} else {
logMessages('No data loaded', true);
}
} else {
logMessages('Data loaded via jquery.data()', true);
}
}
var $window = $(window);
var width = $window.width();
$(window).on({
load: function() {
logMessages('load method');
},
resize: function() {
setInterval(function() {
if (width != $window.width()) {
width = $window.width();
GetData();
var data = $("body").data("data");
var rc = new ResizeColumns(data, width, 3);
rc.resize();
}
}, 300);
}
});
あなたのコードは、あなたが最初に必要と言うことに応じてとても混乱しています。このフィドルを見てください。 JavaScriptやCSSはまったくありません。ちょうどブートストラップ。 http://jsfiddle.net/MKL4g/631/。ウィンドウのサイズを変更して、結果を確認してください。 – Masterakos
@ Tsalikidisあなたの例では、2番目の列に質問2が含まれていますが、2番目の質問がない限り、1番目の列にする必要があります。 – stanley
それはあなたがそれを変更することができるテキストです：P – Masterakos